前端权限控制

面试题：前端的权限控制怎么做？分哪几个层级？

前端权限分三层：路由（页面）权限、按钮（操作）权限、数据权限。前端控制是为了体验，真正的安全必须由后端兜底（前端可被绕过）。

1. 路由权限

控制用户能访问哪些页面，主流两种思路：

方案	做法	适用
前端静态路由 + 角色过滤	路由表里标 meta.roles，登录后按角色过滤可访问路由	角色固定、不常变
后端返回动态路由	登录后后端下发该用户的路由/菜单，前端 addRoute 动态注册	权限灵活、多角色（中后台首选）

// 路由守卫（Vue Router 示例）
router.beforeEach((to, from, next) => {
  const token = getToken();
  if (!token) return next("/login"); // 未登录
  if (to.meta.roles && !to.meta.roles.includes(getUserRole())) {
    return next("/403"); // 无权限
  }
  next();
});

动态路由要点：① 登录后请求权限菜单 → ② router.addRoute 注册 → ③ 处理刷新丢失（在路由守卫里判断未注册则重新拉取）→ ④ 404 通配路由要最后动态添加。

2. 按钮（操作）权限

控制页面内的增删改按钮是否显示/可用。常见用自定义指令或封装组件/Hook：

// Vue 自定义指令 v-permission="'user:delete'"
app.directive("permission", {
  mounted(el, binding) {
    const permissions = store.getters.permissions; // 当前用户权限码列表
    if (!permissions.includes(binding.value)) {
      el.parentNode?.removeChild(el); // 无权限直接移除
    }
  },
});

// React：封装权限组件 / Hook
const hasAuth = (code) => usePermissions().includes(code);
{hasAuth("user:delete") && <Button>删除</Button>}

3. 数据权限

同一页面不同用户看到的数据范围不同（如「只看本部门」），这部分必须后端按用户身份过滤，前端仅做展示。

关键注意点

• 安全性：前端权限只是体验优化，接口必须后端鉴权，否则用户改前端代码/直接调接口就能越权。
• 权限模型：后端常用 RBAC（用户—角色—权限），前端拿到的是「权限码列表」或「菜单树」。
• 登录态：配合 token/JWT，详见 登录 与 Node 鉴权与安全。