React JS应用多角色管理方法，如何解决篡改localStorage角色越权问题？

前端侧的所有权限校验仅可作为交互优化手段，永远不能作为安全防线，所有权限校验的核心逻辑必须放在服务端实现。

• 核心层：服务端强校验所有权限相关请求 #

无论前端传入的角色标识是什么，所有管理员相关的接口、数据查询请求，服务端都必须先基于用户携带的身份凭证（如JWT Token、SessionID），从自身可信存储（数据库、Redis等）中查询该用户的真实角色，只有确认是管理员身份才允许操作、返回对应数据。即使前端用户篡改了本地存储的角色值，也无法从服务端获取到任何管理员权限的内容，即使强行进入管理员页面也只能看到空内容或者接口报错。

• 前端优化1：调整权限标识存储方案 #

不要将角色、权限这类敏感信息明文存在localStorage这类用户可直接编辑的前端存储中：

• 优先将权限标识存在前端运行时内存中（如Vuex/Pinia/Redux等状态管理的内存变量），页面刷新后自动失效，需要重新从服务端拉取真实的权限信息
• 如果确实需要持久化存储，可将角色信息放在带服务端签名的JWT Payload中存储，前端篡改JWT内容会导致服务端签名校验直接失败
• 即使明文存储也仅用于控制UI展示逻辑（比如隐藏管理员入口），不能作为权限放行的判断依据

• 前端优化2：路由拦截联动服务端校验 #

访问管理员路由的拦截逻辑不要仅判断本地存储的角色值，可增加服务端权限预校验：
错误示例：

// 仅判断本地存储值，极易被绕过
router.beforeEach((to, from, next) => {
  const isAdmin = localStorage.getItem('role') === 'admin'
  to.meta.needAdmin && !isAdmin ? next('/403') : next()
})

优化示例：

// 预请求服务端确认权限，再决定是否放行
router.beforeEach(async (to, from, next) => {
  if (to.meta.needAdmin) {
    const { isAdmin } = await fetch('/api/auth/check-admin').then(res => res.json())
    !isAdmin ? next('/403') : next()
    return
  }
  next()
})

内容的提问来源于stack exchange，提问作者S N Sharma