单页应用(SPA)如何实现路由防护，避免客户端绕过权限直接访问？

1. 动态路由按需注册 #

• 不要将全量路由配置打包进前端静态资源，仅保留登录、404等公开路由的基础配置。用户登录成功后，从后端接口拉取当前账号仅有权限访问的路由列表，前端通过router.addRoute()方法动态注册对应路由。无权限的路由从始至终不存在于客户端router实例中，就算用户手动调用push也只会跳转到404页。
• 权限路由对应的组件全部做异步拆分打包，没有权限的用户根本无法拉取到对应页面的代码资源。

2. 冻结路由核心属性防止篡改 #

• 路由实例初始化完成后，直接对核心鉴权相关属性做不可写配置，从根源阻止用户修改守卫逻辑：

// 路由挂载到Vue实例后执行
// 锁定全局前置守卫
Object.defineProperty(app.$router, 'beforeEach', {
  writable: false,
  configurable: false,
  value: app.$router.beforeEach
})
// 锁定守卫钩子队列
Object.defineProperty(app.$router, 'beforeHooks', {
  writable: false,
  configurable: false,
  value: app.$router.beforeHooks
})
// 简单粗暴方案：直接冻结整个router实例，禁止任何属性修改
Object.freeze(app.$router)

• Vue3环境下可以将router实例用shallowRef包裹后再挂载，进一步降低外部直接修改内部属性的可能。

3. 多层鉴权逻辑冗余校验 #

• 不要把鉴权逻辑全放在全局导航守卫一层，每个权限路由补充两层校验：
  • 路由元信息配置权限标识，在组件内路由守卫beforeRouteEnter中做二次鉴权，校验不通过直接跳转403
  • 页面根组件挂载钩子中补充最终鉴权，就算用户绕过路由层跳转，组件渲染前也会被拦截

// 组件内守卫示例
beforeRouteEnter(to, from, next) {
  // 权限校验方法统一抽离复用，避免被单点破解
  if (!window.__PERMISSION_CHECK__(to.meta.permissionCode)) {
    next('/403')
    return
  }
  next()
}

4. 路由路径混淆处理 #

• 敏感权限路由不要使用语义化路径（比如/system/admin/manage），可以将路由路径替换为随机字符串映射，映射关系仅在用户登录后从后端返回，前端做内部转换，用户即使拿到路由实例也无法对应到实际业务功能的访问路径。

补充说明：所有客户端层面的防护都是提升破解成本，核心的数据安全一定需要后端接口做好权限校验，双端配合才能实现完整的权限体系。

内容的提问来源于stack exchange，提问作者Dimar Hanung