财务报表系统中，导航守卫仅控制路由跳转，高危操作拦截需结合路由meta标记requiresaudit、beforeeach校验审计状态（scope匹配+有效+未过期）、后端二次鉴权及敏感参数白名单校验。
在财务报表系统中，导航守卫不能直接“拦截高危操作”，它只负责路由跳转阶段的控制。真正需要拦截的是用户试图访问高风险功能页面的行为——比如导出全量凭证、修改历史期间报表、批量删除科目余额等。这类页面必须被明确标记为“需安全审计通过”，再结合守卫逻辑做前置阻断。
给高危路由打上审计标识
在路由配置中，用 meta 字段声明该页面属于高危操作，并要求审计状态：
{
path: '/export/voucher-all',
name: 'ExportAllVouchers',
component: () => import('@/views/ExportAllVouchers.vue'),
meta: {
requiresAudit: true,
auditScope: 'financial:export:full',
riskLevel: 'high'
}
}
这样后续守卫就能统一识别并处理所有带 requiresAudit: true 的路由，无需硬编码路径。
在 beforeEach 中校验审计结果
全局守卫里检查当前用户是否已通过对应范围的安全审计。审计状态建议从 Vuex/Pinia 或本地加密缓存中读取（避免仅依赖 localStorage 被篡改）：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAudit) {
const auditRecord = getAuditRecord(to.meta.auditScope); // 如：'financial:export:full'
if (!auditRecord || !auditRecord.passed ||
Date.now() > new Date(auditRecord.expiredAt).getTime()) {
next({
name: 'AuditRequired',
params: { scope: to.meta.auditScope }
});
return;
}
}
next();
});
关键点：
- 审计记录应包含 作用域（scope）、通过时间、过期时间、操作人、签名摘要，防止伪造
- 不建议只查“有没有审计”，而要验证 scope 匹配 + 状态有效 + 未过期
- 跳转到统一审计提示页（
AuditRequired），页面内可触发重新审计流程或联系管理员
配合后端做二次校验（必须）
前端守卫只是第一道防线，不能替代服务端鉴权。所有高危接口必须在后端再次校验：
- 请求头携带审计 token 或 scope 声明
- 后端查询审计中心服务，确认该用户在该 scope 下当前审计有效
- 即使前端绕过守卫直接调 API，后端也应返回
403 Forbidden并附带审计失败原因
例如导出接口响应：
HTTP/1.1 403 Forbidden X-Audit-Status: expired X-Audit-Scope: financial:export:full
补充：对敏感参数做运行时拦截
有些风险不在页面入口，而在参数本身。比如 URL 中传了 ?period=2020 却允许导出十年前的报表——可在守卫中加参数白名单校验：
if (to.name === 'ExportAllVouchers') {
const period = to.query.period;
const validPeriods = getCurrentAndLastTwoFiscalYears(); // 后端同步下发
if (!validPeriods.includes(period)) {
next({ name: 'Forbidden', params: { reason: 'invalid_period' } });
return;
}
}
这类校验建议由后端提供动态有效期列表，前端只做轻量比对，避免规则滞后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
