ReactJs/NextJs应用中前端用户权限的处理方案咨询

为什么不推荐把权限存在JWT里 #

JWT本身是可解码的，虽然签名能防止篡改，但前端存的JWT里的权限内容用户能直接看到，而且一旦后端修改了用户权限，前端没法实时同步，必须重新登录获取新的JWT，体验很差。另外，JWT的核心作用是身份认证，并非存储业务权限的合适载体。

可行的前端权限存储与控制方案 #

• 内存+本地存储结合存储权限
  登录成功后，从后端接口单独获取当前用户的权限列表（比如['view_dashboard', 'edit_user']这类细粒度权限，或者角色标识），把权限存在前端状态管理库（比如Vuex、Redux）里，同时将权限序列化后存在localStorage或sessionStorage做持久化。页面刷新时，从本地存储读取权限并同步到状态管理中。
  注意：本地存储的权限只做缓存使用，所有敏感操作（比如提交表单、访问路由）必须请求后端接口做权限校验，不能完全信任前端存储的内容。

• 路由与组件层面的权限控制

  • 路由控制：在路由配置里添加权限标识，比如：

    const routes = [
      {
        path: '/admin',
        component: AdminPage,
        meta: { requiredPermissions: ['admin'] }
      }
    ]
    

    然后在路由守卫中，判断当前用户的权限是否匹配路由的requiredPermissions，不匹配则跳转至403页面。
  • 组件控制：封装权限指令或高阶组件，比如Vue中自定义v-permission指令：

    Vue.directive('permission', {
      inserted(el, binding) {
        const userPermissions = store.state.user.permissions
        if (!userPermissions.includes(binding.value)) {
          el.style.display = 'none'
        }
      }
    })
    

    在组件中直接使用：<button v-permission="'edit_user'">编辑用户</button>，没有权限就自动隐藏组件。

• 实时同步权限变更
  如果后端支持，可以通过WebSocket推送权限变更通知，前端收到后立即更新状态管理和本地存储的权限数据；如果没有WebSocket，也可以在用户打开敏感页面时，主动请求后端接口拉取最新权限，替换前端旧的权限数据。

关键安全提醒 #

前端的权限控制只是用来优化用户体验，真正的权限校验必须在后端完成。所有接口请求都要校验用户权限，不能因为前端隐藏了某个按钮或路由，就省略后端的权限校验，避免恶意用户通过直接调用接口绕过前端限制。

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