VueJs后台管理系统：如何全局拦截未授权地址栏页面访问？

一、前端全局路由拦截（以Vue/React为例） #

前端拦截用于优化用户体验，阻止未授权用户通过地址栏直接访问页面：

• 1. 给路由配置绑定权限标识
     将每个需要权限的路由，通过meta.permissions字段标记所需权限，示例（Vue）：

const routes = [
  {
    path: '/admin/dashboard',
    component: Dashboard,
    meta: { permissions: ['view_dashboard'] }
  },
  {
    path: '/admin/user-manage',
    component: UserManage,
    meta: { permissions: ['manage_users'] }
  },
  // 无权限提示页路由
  {
    path: '/no-permission',
    component: () => import('@/views/NoPermission.vue')
  }
]

• 2. 配置全局路由守卫
     在路由跳转前统一校验权限，无权限则跳转到提示页，示例（Vue）：

router.beforeEach((to, from, next) => {
  // 跳过登录页、404等无需校验的页面
  const ignorePaths = ['/login', '/404']
  if (ignorePaths.includes(to.path)) {
    next()
    return
  }

  // 从登录后存储的用户信息中获取权限列表（建议存在Vuex/Redux而非仅localStorage）
  const userPermissions = JSON.parse(localStorage.getItem('userPermissions')) || []
  const requiredPermissions = to.meta.permissions || []

  // 权限校验：若目标路由需权限且用户无对应权限，跳转至无权限页
  if (requiredPermissions.length > 0 && !requiredPermissions.some(perm => userPermissions.includes(perm))) {
    next('/no-permission')
    return
  }

  // 权限通过，正常跳转
  next()
})

React项目可通过react-router的Navigate组件结合全局路由监听实现相同逻辑，核心思路一致：先定义路由权限，再在跳转前校验，无权限则重定向至提示页。

• 3. 实现无权限提示组件
     在NoPermission.vue（或React对应组件）中展示“您无权查看此页面”，可添加返回首页/登录页的按钮。

二、后端全局接口拦截（必须实现，保障安全） #

前端拦截仅能阻止普通用户，恶意用户可直接调用接口，因此后端必须做全局权限校验：

• 1. 给接口绑定权限标识
     以Java SpringBoot为例，用自定义注解标记接口所需权限：

@GetMapping("/api/admin/users")
@RequiresPermissions("manage_users") // 自定义注解，标记接口所需权限
public Result getUserList() {
  // 业务逻辑
}

• 2. 实现全局权限拦截器
     在接口请求到达前校验用户权限，无权限则返回403响应：

public class PermissionInterceptor implements HandlerInterceptor {
  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    // 从请求头/Token中获取当前用户的权限列表
    List<String> userPermissions = getUserPermissions(request);

    // 解析接口所需权限（从注解中获取）
    if (handler instanceof HandlerMethod) {
      HandlerMethod handlerMethod = (HandlerMethod) handler;
      RequiresPermissions annotation = handlerMethod.getMethodAnnotation(RequiresPermissions.class);
      if (annotation != null) {
        String requiredPerm = annotation.value();
        if (!userPermissions.contains(requiredPerm)) {
          response.setStatus(HttpServletResponse.SC_FORBIDDEN);
          response.getWriter().write(JSON.toJSONString(Result.error("您无权访问此接口")));
          return false;
        }
      }
    }
    return true;
  }
}

• 3. 注册拦截器，让所有接口走权限校验流程。

三、额外优化建议 #

• 用户权限列表优先存在HttpOnly Cookie或后端Session中，避免仅存在localStorage被XSS窃取。
• 菜单生成逻辑与路由权限使用同一套标识，确保菜单展示和路由拦截规则一致。
• 敏感操作（如删除、修改）除路由拦截外，需在按钮级别添加权限控制，防止用户通过控制台触发操作。

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