Vue路由未授权访问问题：前端路由守卫代码可被篡改

你的问题核心在于前端权限校验完全依赖客户端可篡改的变量——publicPages存储在浏览器内存中，开发者工具能轻松修改，导致权限控制形同虚设。以下是具体的解决思路和优化方案：

一、核心修复原则 #

前端仅负责跳转逻辑，权限决策必须由后端主导，永远不要信任客户端传来的任何状态或变量。

二、具体修复步骤 #

1. 移除前端静态权限列表，统一用路由元信息管理 #

删掉publicPages变量，直接通过路由的meta.requiresAuth字段标记是否需要权限：

• 登录页、首页等公开页面，设置meta: { requiresAuth: false }
• 需要权限的页面，设置meta: { requiresAuth: true }

2. 增加后端权限校验接口 #

每次进入需要权限的路由时，调用后端接口校验当前用户是否有权限访问该路径。后端需基于用户登录态（如Token）和数据库中的权限配置返回校验结果，前端仅根据结果执行跳转。

3. 重写路由守卫代码 #

router.beforeEach(async (to, from, next) => {
  const auth: AuthStore = useAuthStore();
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth) {
    // 先做本地快速判断（仅提升体验，不能替代后端校验）
    if (!auth.user) {
      auth.returnUrl = to.fullPath;
      return next('/auth/login1');
    }
    
    // 关键：调用后端接口做真实权限校验
    try {
      const hasPermission = await auth.checkRoutePermission(to.path);
      if (hasPermission) {
        next();
      } else {
        // 无权限时跳转到403页面或首页
        next('/403');
      }
    } catch (error) {
      // 接口请求失败（如Token过期），清空登录态并跳转登录
      auth.logout();
      next('/auth/login1');
    }
  } else {
    // 公开页面直接放行
    next();
  }
});

4. 额外加固措施 #

• 动态生成路由：根据后端返回的用户权限列表，动态添加可访问的路由，未授权的路由不会出现在前端路由表中。
• 后端接口全局校验：所有需要权限的接口，后端都要单独校验用户权限，即使前端被篡改，也无法直接调用敏感接口。
• 用户状态签名校验：后端返回用户信息和权限列表时附带签名，前端校验签名合法性，若签名无效则清空登录态。

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