LocalStorage本身不提供权限控制，仅存储字符串；实现前端权限列表需将权限数组JSON序列化后存入，读取时反序列化并用于UI控制或路由拦截，但所有敏感操作必须由后端二次校验。
LocalStorage 本身不提供权限控制，它只是把字符串存到浏览器里。实现“前端权限列表”的本地存储，关键在于：把权限数据（比如菜单、按钮、接口访问标识）序列化后存入 LocalStorage，并在需要时读取、解析、用于页面展示或功能拦截。
权限数据怎么存？用 JSON 字符串
权限通常是一组结构化数据，比如：
- [{ "code": "user:read", "name": "查看用户" }, { "code": "user:edit", "name": "编辑用户" }]
- 或者更简化的数组：["user:read", "user:edit", "order:delete"]
存的时候必须转成字符串：
const permissions = ["user:read", "user:edit", "order:delete"];
localStorage.setItem("permissions", JSON.stringify(permissions));
读取和使用权限做判断
从 LocalStorage 取出后要反序列化，再配合逻辑使用：
const permsStr = localStorage.getItem("permissions");
const permissions = permsStr ? JSON.parse(permsStr) : [];
// 判断是否有某权限
function hasPermission(code) {
return permissions.includes(code);
}
// 示例：控制按钮显示
if (hasPermission("user:delete")) {
document.getElementById("deleteBtn").style.display = "block";
} else {
document.getElementById("deleteBtn").style.display = "none";
}
权限更新后及时同步 LocalStorage
登录后获取权限、登出清空、或后台动态变更权限时，都要主动更新：
- 登录成功拿到权限数组 → localStorage.setItem("permissions", JSON.stringify(newPerms))
- 退出登录 → localStorage.removeItem("permissions")
- 权限变更（如管理员调整）→ 覆盖写入新值，前端下次读取即生效
注意安全边界：仅作展示/体验优化，不可替代后端校验
LocalStorage 中的权限可被用户轻易修改（打开开发者工具就能改），所以：
- 所有敏感操作（如删除、支付、提权）必须由后端再次鉴权
- 前端只用权限做 UI 隐藏、路由跳转拦截、按钮禁用等“体验层”控制
- 不要用 LocalStorage 权限决定是否调用某个 API —— 调用前仍需服务端校验
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
