RBAC前端架构-06：使用localstorage及Vuex用户信息存储逻辑

1-文件调整

1. 修改frontend-vue2\src\store\index.js，用于整体整合Vuex更简洁

importVuefrom"vue";importVuexfrom"vuex";// 标签页管理模块importtabsfrom"./modules/tabs";// 用户信息管理模块importuserfrom"./modules/user";Vue.use(Vuex);// 创建并导出 Vuex store 实例exportdefaultnewVuex.Store({// 模块化配置 - 将 store 分割成不同的模块modules:{// 所有user的commit/dispatch都要加命名空间，如： this.$store.dispatch("user/logout");user,// 后续扩展...},});

2. 新增frontend-vue2\src\store\modules\user.js，用于控制用户相关的信息，结合localstorage，配合Vuex存储用户的token，基本信息，菜单，权限信息，后续便于其他地方使用

import{loginApi,logoutApi}from"@/api/auth";import{getCurrentUserMenus,getUserInfo}from"@/api/user";importVuefrom"vue";importVuexfrom"vuex";Vue.use(Vuex);// 页面刷新时从 localStorage 里恢复用户状态constsavedToken=localStorage.getItem("token");constsavedUserInfo=localStorage.getItem("userInfo");constsavedUserMenus=localStorage.getItem("userMenus");constsavedUserPermissions=localStorage.getItem("userPermissions");conststate={// 全局状态：存储用户 tokentoken:savedToken||null,// 用户信息userInfo:savedUserInfo?JSON.parse(savedUserInfo):null,// 全局loading信息，用于调用接口时显示 loadingloading:false,// 当前用户的权限码userPermissions:savedUserPermissions?JSON.parse(savedUserPermissions):[],// 当前用户的菜单树userMenus:savedUserMenus?JSON.parse(savedUserMenus):[],};// mutations：修改state的唯一入口constmutations={// 设置 token（登录时调用）setToken(state,token){state.token=token;localStorage.setItem("token",token);},// 清除 token（退出时调用）clearToken(state){state.token=null;localStorage.removeItem("token");},// 设置用户信息setUserInfo(state,userInfo){state.userInfo=userInfo;localStorage.setItem("userInfo",JSON.stringify(userInfo));},// 清除用户信息clearUserInfo(state){state.userInfo=null;localStorage.removeItem("userInfo");},setUserPermissions(state,userPermissions){state.userPermissions=userPermissions;localStorage.setItem("userPermissions",JSON.stringify(userPermissions));},clearUserPermissions(state){state.userPermissions=[];localStorage.removeItem("userPermissions");},setUserMenus(state,userMenus){state.userMenus=userMenus;localStorage.setItem("userMenus",JSON.stringify(userMenus));},clearUserMenus(state){state.userMenus=[];localStorage.removeItem("userMenus");},// 控制 loading 显示开关setLoading(state,flag){state.loading=flag;},};// actions：处理异步逻辑（像 Java Service 层）constactions={asynclogin({commit},{username,password}){try{// 登录获取tokenconstres=awaitloginApi({username,password});// 登录失败，抛错if(res.code!=="200"){thrownewError(res.message||"登录失败");}commit("setToken",res.data);// 登录成功后获取用户信息constuserInfo=awaitgetUserInfo();commit("setUserInfo",userInfo.data);// 登录成功后获取用户权限// TODO可以拆一个权限接口commit("setUserPermissions",userInfo.data.permissions||[]);// 登录成功后获取用户的菜单信息constuserMenus=awaitgetCurrentUserMenus();commit("setUserMenus",userMenus.data||[]);}catch(err){throwerr;}},// 退出登录asynclogout({commit},skipApiCall=false){try{commit("setLoading",true);// 只有在主动触发 logout 时才调用 APIif(!skipApiCall){awaitlogoutApi();}}catch(error){console.error("Logout API error:",error);}finally{commit("clearToken");commit("clearUserInfo");commit("clearUserMenus");commit("clearUserPermissions");commit("setLoading",false);}},};// getters：数据的派生计算constgetters={// 获取登录状态：是否有 tokenisLoggedIn:(state)=>!!state.token,// 获取用户信息userInfo:(state)=>state.userInfo,// 获取用户角色roles:(state)=>state.userInfo?.roles||[],// 获取用户权限permissions:(state)=>state.userPermissions||[],// 检查是否有某个权限hasPermission:(state)=>(permission)=>{returnstate.userPermissions?.includes(permission)||false;},// 检查是否有某个角色hasRole:(state)=>(role)=>{returnstate.userInfo?.roles?.includes(role)||false;},// 获取用户菜单userMenus:(state)=>state.userMenus||[],// 页面loading状态isLoading:(state)=>state.loading,};// 导出这个 Vuex 模块的配置exportdefault{// 开启命名空间，防止不同模块间的状态冲突namespaced:true,state,mutations,actions,getters,};

主要作用：

• 状态管理 (State): 存储token、用户信息、权限列表、菜单树以及全局加载状态。
• 持久化: 初始化时自动从localStorage读取数据，更新时同步写入，确保页面刷新后登录状态不丢失。
• 异步流 (Actions): 封装了复杂的登录逻辑（登录 -> 获取用户信息 -> 获取菜单/权限）和登出逻辑。
• 数据派生 (Getters): 提供快捷的权限判断方法（如hasPermission），方便在组件中直接使用

2-结构展示

获取对应接口响应的信息，然后存储

• token：

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNzcwNzc3OTYwLCJleHAiOjE3NzA4NjQzNjB9.GxtIfTMJ_fot4VodLEdQPFeFuiTZ-PQWHfo0dN6GVco

• userInfo：

{"id":1,"username":"admin","nickname":"管理员Main","email":"999999999@qq.com","phone":"13983999999","status":1,"createTime":"2025-09-23T07:19:52","updateTime":"2026-01-23T08:17:59","roles":["ADMIN"],"permissions":["btn:user:system:menu:create","btn:user:system:menu:delete","btn:permission:assign","btn:user:create","btn:user:update","btn:user:delete","btn:user:list"]}

• userMenus:

[{"id":5,"menuName":"系统管理","menuCode":"menu:user:system","menuType":1,"parentId":null,"path":"/system","component":"","icon":"","sortOrder":0,"status":1,"createTime":"2025-10-24T03:58:06","updateTime":"2025-10-31T08:56:10","children":[{"id":4,"menuName":"个人中心","menuCode":"menu:user:system:profile","menuType":1,"parentId":5,"path":"/system/profile","component":"Profile","icon":"user","sortOrder":0,"status":1,"createTime":"2025-10-24T03:58:06","updateTime":"2025-10-31T08:55:57","children":[]},{"id":6,"menuName":"权限分配","menuCode":"menu:user:system:permissionassign","menuType":1,"parentId":5,"path":"/system/permissionsAssign","component":"PermissionsAssign","icon":"","sortOrder":0,"status":1,"createTime":null,"updateTime":"2025-11-19T07:01:24","children":[]},{"id":1,"menuName":"用户管理","menuCode":"menu:user:system:user","menuType":1,"parentId":5,"path":"/system/user","component":"UserManagement","icon":"user","sortOrder":1,"status":1,"createTime":"2025-10-24T03:58:06","updateTime":"2025-10-31T08:55:57","children":[]},{"id":3,"menuName":"菜单管理","menuCode":"menu:user:system:menu","menuType":1,"parentId":5,"path":"/system/menu","component":"MenuManagement","icon":"setting","sortOrder":3,"status":1,"createTime":"2025-10-24T03:58:06","updateTime":"2025-10-31T08:55:57","children":[]}]},{"id":2,"menuName":"订单管理","menuCode":"menu:order","menuType":1,"parentId":null,"path":"/order","component":"OrderManagement","icon":"tickets","sortOrder":2,"status":1,"createTime":"2025-10-24T03:58:06","updateTime":"2025-10-30T04:18:39","children":[]}]

• userPermissions:

["btn:user:system:menu:create","btn:user:system:menu:delete","btn:permission:assign","btn:user:create","btn:user:update","btn:user:delete","btn:user:list"]

以上信息主要用于让其他组件获取使用，比如后续菜单的展示，就用userMenus中的信息