前端权限控制必须依赖后端验证，禁止仅靠本地角色字段；路由级需异步检查权限接口，按钮级应基于细粒度权限数组判断，token宜存httpOnly Cookie，所有关键权限判定必须由后端完成。
JavaScript 本身不处理用户认证与权限控制的后端逻辑，它只能配合服务端完成前端校验、状态管理与界面响应。直接在前端做权限判定（比如只靠 localStorage 里的角色字段）是不安全的，所有关键权限检查必须由后端完成。
前端路由级权限控制（React Router v6 / Vue Router）
这是最常见的“看得见”的权限拦截：用户没权限时，不让访问某个页面或重定向到 403。
- 不要仅靠
useNavigate()或router.push()前手动判断user.role—— 这个值可能被篡改 - 应在进入路由前触发异步权限检查，例如调用
checkPermission('/admin/users')接口，等待返回{ allowed: true }再渲染 - React Router 中可封装
RequireAuth组件，但内部应依赖从上下文或 Redux 获取的、经后端验证过的authState，而非本地存储的角色字符串 - Vue Router 的
beforeEach守卫里，避免直接读取localStorage.getItem('role')做跳转决策
按钮/操作级权限隐藏与禁用
界面元素是否显示、是否可点击，取决于当前用户是否拥有对应操作权限（如 user:delete），而不是简单按角色（如 'admin'）硬编码。
- 权限标识建议使用细粒度字符串（如
'order:refund:approve'），而非宽泛角色名，便于后端动态赋权 - 前端应维护一份从登录接口返回的
permissions: string[]数组（例如['user:read', 'user:update']），每次渲染按钮前用permissions.includes('user:delete')判断 - 禁用按钮（
disabled）不能替代权限拦截 —— 用户仍可通过 DevTools 修改 DOM 或调用 API，所以对应 API 请求仍需后端鉴权 - 避免在 JSX/Template 中写
v-if="user.role === 'admin'"，这会随角色扩展迅速失控
Token 管理与自动刷新（JWT 场景）
前端负责携带、存储和续期 token，但不解析或信任其内容做核心判断。
立即学习“Java免费学习笔记（深入）”；
- token 应存于
httpOnlyCookie（推荐）或内存变量中；避免存入localStorage（XSS 风险高） - 调用 API 时统一通过请求拦截器注入
Authorization: Bearer，不要每个fetch()都手动拼 - 当收到
401响应时，不应立即清空用户状态 —— 先尝试用 refresh token 调用/auth/refresh，失败后再登出 - JWT 的
exp字段仅用于前端预判过期（如提前 30 秒触发刷新），不可作为唯一过期依据；后端必须校验签名与有效期
最常被忽略的一点：前端永远不该承担“这个用户能不能删这条数据”的最终决定权。哪怕按钮灰了、路由跳不过去、API 返回 403，只要后端没校验，攻击者绕过 JS 就能发请求。权限逻辑的重心始终在服务端接口的 if (!hasPermission(req.user, 'data:delete', req.params.id)) { throw new ForbiddenError() } 这一行里。
