LocalStorage只能存字符串，存储权限列表需先JSON.stringify()序列化，读取时用JSON.parse()还原并加try-catch防护；前端路由鉴权必须结合路由守卫动态拦截校验，且后端接口必须二次校验权限。
LocalStorage 本身只能存字符串，所以存储复杂权限列表必须先序列化；前端路由鉴权不能只靠 LocalStorage，必须结合路由守卫（如 Vue Router 的 beforeEach 或 React Router 的 useEffect + Navigate）动态拦截+校验，否则权限可被轻易绕过。
将权限列表存入 LocalStorage
权限数据通常是数组或嵌套对象（例如：[{"code":"user:read","desc":"查看用户"},{"code":"order:edit","desc":"编辑订单"}]）。直接 localStorage.setItem('permissions', perms) 会报错，因为非字符串类型会被转成 [object Object]。
- 存之前用
JSON.stringify()序列化：localStorage.setItem('permissions', JSON.stringify(permList)) - 取的时候用
JSON.parse()还原：const permList = JSON.parse(localStorage.getItem('permissions') || '[]') - 建议加 try-catch 防止解析失败（比如手动清空了部分字段导致 JSON 格式损坏）：
try {
const raw = localStorage.getItem('permissions');
permList = raw ? JSON.parse(raw) : [];
} catch (e) {
console.warn('权限解析失败，使用空列表');
permList = [];
}
设计权限校验逻辑（不依赖 UI 框架）
核心是定义一个通用判断函数，比如 hasPermission(code)，它查当前权限列表中是否存在匹配的 code 字符串：
- 支持精确匹配：
hasPermission('user:delete') - 支持前缀匹配（如允许所有 user 相关操作）：
hasPermission('user:*')→ 可用perm.code.startsWith(code.replace(/\*/g, '')) - 权限项可扩展字段，比如加
scope: 'tenant'实现租户级控制，校验时一并判断
示例函数：
立即学习“前端免费学习笔记（深入）”；
function hasPermission(targetCode) {
const perms = JSON.parse(localStorage.getItem('permissions') || '[]');
if (!Array.isArray(perms)) return false;
return perms.some(perm => {
if (perm.code === targetCode) return true;
if (perm.code.endsWith(':*') && targetCode.startsWith(perm.code.replace(/:\*/, ''))) return true;
return false;
});
}
在前端路由中做鉴权拦截
以 Vue Router 为例（v4+），在全局前置守卫中检查目标路由所需的权限：
- 给路由配置添加自定义元信息：
meta: { requiredPermissions: ['user:read'] } - 守卫中读取
to.meta.requiredPermissions，逐个调用hasPermission() - 任一权限缺失，重定向到 403 页面或登录页
router.beforeEach((to, from, next) => {
const required = to.meta.requiredPermissions || [];
const missing = required.filter(code => !hasPermission(code));
if (missing.length > 0) {
next({ name: 'Forbidden' }); // 或跳登录页
} else {
next();
}
});
React Router（v6.4+）可用 createBrowserRouter 配合 loader 或自定义 hook（如 useRequireAuth）在组件内提前校验，再配合 <navigate></navigate> 跳转。
安全提醒与补充建议
LocalStorage 中的权限只是用于提升体验（免重复拉取、快速隐藏按钮），绝不可作为唯一鉴权依据：
- 后端接口必须做二次校验，前端权限可被开发者工具随意篡改
- 登录后应主动请求最新权限并覆盖 LocalStorage，避免 stale data
- 敏感操作（如删除、支付）建议每次调用接口前单独校验，不依赖缓存
- 退出登录时务必清除：
localStorage.removeItem('permissions')
