怎么通过HTML5中LocalStorage存储复杂的权限列表并实现前端路由鉴权-H5教程-PHP中文网

LocalStorage只能存字符串，存储权限列表需先JSON.stringify()序列化，读取时用JSON.parse()还原并加try-catch防护；前端路由鉴权必须结合路由守卫动态拦截校验，且后端接口必须二次校验权限。

怎么通过html5中localstorage存储复杂的权限列表并实现前端路由鉴权

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' 实现租户级控制，校验时一并判断

示例函数：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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）在组件内提前校验，再配合跳转。