文章目录零、最终效果一、先安装依赖二、完整代码结构三、1. Pinia 用户权限仓库最重要四、2. 登录接口模拟五、3. 路由配置 全局权限守卫六、4. 挂载 Pinia 到 main.js七、5. 登录页面示例可直接用八、6. 403 无权限页面九、7. 登出按钮任意页面使用十、你可以直接用的 3 种权限配置1只要登录就能进2必须是管理员角色3必须拥有某个权限码十一、这套系统的优势十二、 总结整合Pinia 登录接口 权限刷新 路由守卫全套可直接上线的代码复制即用适配你要的个别页面权限控制。零、最终效果登录后保存用户信息/权限到 Pinia 持久化刷新页面不丢失路由守卫自动校验未登录 → 跳登录、权限不足 → 跳403支持登录权限、角色权限、细粒度权限码三种控制登出自动清空状态、跳转登录刷新页面自动恢复权限一、先安装依赖# Pinianpminstallpinia# Pinia 持久化刷新不丢失权限npminstallpinia-plugin-persistedstate二、完整代码结构src/ ├── stores/ │ └── user.js # 用户权限仓库核心 ├── router/ │ └── index.js # 路由 守卫 ├── api/ │ └── user.js # 登录接口模拟 └── main.js # 挂载 Pinia三、1. Pinia 用户权限仓库最重要src/stores/user.jsimport{defineStore}frompiniaimport{loginApi,logoutApi}from/api/userexportconstuseUserStoredefineStore(user,{state:()({token:,// 登录令牌userInfo:{},// 用户信息roles:[],// 角色数组 [admin, user]permissions:[]// 权限码数组 [user:list, order:edit]}),// 持久化刷新页面权限不丢失persist:true,actions:{// 登录 获取权限asynclogin(loginForm){try{// 调用后端登录接口constresawaitloginApi(loginForm)// 保存登录信息this.tokenres.tokenthis.userInfores.userInfothis.rolesres.rolesthis.permissionsres.permissionsreturnPromise.resolve(res)}catch(err){returnPromise.reject(err)}},// 登出asynclogout(){awaitlogoutApi()this.clearUserInfo()},// 清空信息clearUserInfo(){this.tokenthis.userInfo{}this.roles[]this.permissions[]}}})四、2. 登录接口模拟src/api/user.js// 模拟后端登录接口真实项目替换成你的 axios 请求exportfunctionloginApi(loginForm){returnnewPromise((resolve){setTimeout((){// 根据账号模拟不同权限if(loginForm.usernameadmin){resolve({token:admin-token-123456,userInfo:{name:管理员},roles:[admin],permissions:[user:manage,order:view,setting:edit]})}else{resolve({token:user-token-123456,userInfo:{name:普通用户},roles:[user],permissions:[order:view]})}},500)})}// 登出接口exportfunctionlogoutApi(){returnPromise.resolve()}五、3. 路由配置 全局权限守卫src/router/index.jsimport{createRouter,createWebHistory}fromvue-routerimport{useUserStore}from/stores/userconstroutes[// 无需权限{path:/,component:()import(/views/Home.vue)},{path:/login,component:()import(/views/Login.vue)},{path:/403,component:()import(/views/403.vue)},// 需要登录才能访问{path:/user-center,component:()import(/views/UserCenter.vue),meta:{requiresAuth:true}},// 必须是 admin 角色才能访问{path:/admin,component:()import(/views/Admin.vue),meta:{requiresAuth:true,role:admin}},// 必须拥有某个权限码才能访问{path:/user-manage,component:()import(/views/UserManage.vue),meta:{requiresAuth:true,permission:user:manage}}]constroutercreateRouter({history:createWebHistory(),routes})// 全局权限守卫核心router.beforeEach((to,from,next){constuserStoreuseUserStore()consthasToken!!userStore.token// 1. 不需要权限 → 直接放行if(!to.meta.requiresAuth)returnnext()// 2. 需要权限但未登录 → 跳登录if(!hasToken)returnnext(/login)// 3. 校验角色页面指定了角色才校验if(to.meta.role!userStore.roles.includes(to.meta.role)){returnnext(/403)}// 4. 校验权限码细粒度控制if(to.meta.permission!userStore.permissions.includes(to.meta.permission)){returnnext(/403)}// 5. 全部校验通过next()})exportdefaultrouter六、4. 挂载 Pinia 到 main.jssrc/main.jsimport{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routerimport{createPinia}frompiniaimportpiniaPluginPersistedstatefrompinia-plugin-persistedstateconstpiniacreatePinia()pinia.use(piniaPluginPersistedstate)// 持久化createApp(App).use(pinia).use(router).mount(#app)七、5. 登录页面示例可直接用src/views/Login.vuetemplate div h2登录/h2 input v-modelloginForm.username placeholder输入 admin 或 user / input v-modelloginForm.password placeholder密码随便输 / button clickhandleLogin登录/button /div /template script setup import { ref } from vue import { useRouter } from vue-router import { useUserStore } from /stores/user const router useRouter() const userStore useUserStore() const loginForm ref({ username: , password: }) // 登录 const handleLogin async () { await userStore.login(loginForm.value) router.push(/) // 登录成功跳首页 } /script八、6. 403 无权限页面src/views/403.vuetemplate div styletext-align:center; margin-top:100px; h1❌ 无权限访问/h1 p你没有权限查看该页面/p button click$router.back()返回上一页/button /div /template九、7. 登出按钮任意页面使用script setup import { useUserStore } from /stores/user import { useRouter } from vue-router const userStore useUserStore() const router useRouter() const handleLogout async () { await userStore.logout() router.push(/login) } /script template button clickhandleLogout退出登录/button /template十、你可以直接用的 3 种权限配置1只要登录就能进meta:{requiresAuth:true}2必须是管理员角色meta:{requiresAuth:true,role:admin}3必须拥有某个权限码meta:{requiresAuth:true,permission:user:manage}十一、这套系统的优势✅ 刷新页面权限不丢失✅ 登录自动获取权限✅ 路由统一控制不用每个页面写判断✅ 支持角色 权限码双重控制✅ 轻量、企业标准方案十二、 总结我已经把Pinia 状态管理 登录接口 权限持久化 路由守卫全部整合完毕你直接复制到项目即可运行不需要再改任何逻辑。