前端权限控制不能替代后端校验，但可提升体验、减少无效请求；建议用localStorage存结构化权限对象，结合路由守卫、hasPermission函数动态控制UI，并及时同步更新与清理。
前端权限控制不能替代后端校验，但可以提升用户体验、减少无效请求。HTML5 的 localStorage 或 sessionStorage 可用于临时存储用户角色、权限标识或菜单配置，配合路由守卫或组件渲染逻辑实现简易的前端权限控制。
存储权限数据的合理方式
避免直接存明文“admin”或“user”，建议存结构化对象，例如：
{
"role": "editor",
"permissions": ["post:read", "post:edit", "comment:delete"],
"expiresAt": 1735689600000
}
这样便于扩展，也方便做时效性判断。写入时用 localStorage.setItem('auth', JSON.stringify(data))；读取后记得 JSON.parse()。
路由级权限拦截（以 Vue Router 或 React Router 类比逻辑）
在路由跳转前检查权限：
立即学习“前端免费学习笔记（深入）”；
- 从 localStorage 读取权限数据，若不存在或已过期，重定向到登录页
- 对敏感路由（如
/admin/users）配置 requiredPermission 字段，如{ meta: { requires: ['user:manage'] } } - 比对当前用户的
permissions数组是否包含该权限，不满足则跳转 403 页面或首页
组件内动态控制 UI 元素显隐
不推荐用 v-if / *ngIf 完全依赖后端返回的布尔值，而应基于本地权限数据做判断：
- 封装一个
hasPermission(code)工具函数，内部检查JSON.parse(localStorage.getItem('auth'))?.permissions - 按钮、操作栏、菜单项等使用该函数控制渲染，例如：
v-if="hasPermission('post:publish')" - 注意：禁用按钮 ≠ 权限控制，仍需后端校验；前端只做体验层过滤
权限更新与存储同步
用户权限变更（如升职、角色调整）后，必须主动刷新本地存储：
- 登录成功或调用权限刷新接口后，重新写入最新权限数据
- 退出登录时，调用
localStorage.removeItem('auth')清理敏感信息 - 可监听 StorageEvent，在多标签页间同步权限变更（需注意事件触发范围限制）
