localstorage本身不提供权限控制,仅存储字符串;实现前端权限列表需将权限数组json序列化后存入,读取时反序列化并用于ui控制或路由拦截,但所有敏感操作必须由后端二次校验。

LocalStorage 本身不提供权限控制,它只是把字符串存到浏览器里。实现“前端权限列表”的本地存储,关键在于:把权限数据(比如菜单、按钮、接口访问标识)序列化后存入 LocalStorage,并在需要时读取、解析、用于页面展示或功能拦截。
权限数据怎么存?用 JSON 字符串
权限通常是一组结构化数据,比如:
- [{ "code": "user:read", "name": "查看用户" }, { "code": "user:edit", "name": "编辑用户" }]
- 或者更简化的数组:["user:read", "user:edit", "order:delete"]
存的时候必须转成字符串:
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
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 大师之旅:从入门到精通的终极指南










