前端权限控制不能替代后端校验，但可提升体验、减少无效请求；建议用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，在多标签页间同步权限变更（需注意事件触发范围限制）