---

前言

上一篇 vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
主要描述了权限控制综合实例中 el-tree 组件的使用细节。
这一篇，主要讲讲pinia 来存取权限code ，并且在 router.beforeEach 实现菜单的权限控制。

---

一、pinia 简要认识

Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。

yarn add pinia
# 或者使用 npm
npm install pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')

二、实现思路

登录后获取用户的权限code，用pinia存储起来，在路由守卫 router.beforeEach 取到code 然后过滤路由菜单。我这里的路由表是提前写好在前端的，主要结构如下图，其中关键的是meta 里面自定义的code，根据这个来判断是否拥有权限的。

{path: '/pathXXX',name: 'pathXXX',meta: {keepAlive: true, //设置页面是否需要使用缓存title: 'pathXXX',icon: 'ShoppingCart',code: 'PermissionCode'  // 权限code},component: Layout,redirect: '/pathXXX/list',children: [{name: 'subPathXXX',path: '/subPathXXX',component: () => import('@/views/subPathXXX/index.vue'),meta: {keepAlive: true, title: 'subPathXXX',icon: 'ShoppingCart',menuCode: 'subPermissionCode'}}]},

三、详细实现步骤

1.用pinia 定义user store 用来存储用户相关的数据,安装 **js-cookie **来辅助存在cookie里

import { defineStore } from 'pinia'
import Cookie from 'js-cookie'
import { getUserPermissonApi } from '@/api/xxx'
/*** @description 获取cookie* @param name* @returns value*/
function getCookie(name: any) {return Cookie.get(name)
}
/*** @description 设置 cookie* @param name* @param value* @returns value*/
function setCookie(name: any, value: any) {return Cookie.set(name, value)
}// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useUserInfoStore = defineStore('app-user', {state: () => ({menuPermission: getCookie('key') ? JSON.parse(getCookie('key') as any) : {}}),actions: {setUserPermisson(info: any) {this.menuPermission = infosetCookie('key', this.menuPermission ? JSON.stringify(this.menuPermission) : '[]')},async getUserPermisson(params: {}) {try {const { data } = await getUserPermissonApi(params)this.setUserPermisson(data) // 这里就是获取code 对应上文 路由表结构中meta.code 来判断是否显示该菜单} catch (erro) {console.warn(erro)}}}
})

2. 在登录后获取用户的userId 与 token 后，调用定义好的 getUserPermisson 获取用户的权限code，并且存储起来

<script setup>
import { useUserInfoStore } from '@/store/modules/user'
const store = useUserInfoStore ()
const getUserPermissionCode = () => {// 获取了用户userid 等store.getUserPermisson({userid ：xxx})
}
</script>

3. 在路由守卫 router.beforeEach 取到code 然后过滤路由菜单

import { start, done, configure } from 'nprogress'
// 提前写好路由表，主要meta.code 要对应上let asyncRoutes: RouteRecordRaws[] = [{path: '/Pathxx',name: 'Pathxx',meta: {keepAlive: true,title: 'Pathxx',icon: 'x',code: '/Pathxx'},component: Layout,redirect: '/Pathxx',children: [{name: 'subPathXX',path: '/subPathXX',component: () => import('@/views/subPathXX/index.vue'),meta: {keepAlive: true, title: 'subPathXX',icon: 'subPathXX',menuCode: 'subPathXX'}}]},
]configure({ showSpinner: false }) // NProgress 配置
const whiteList = ['/login']
router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next) => {start()const usePermission = usePermissionStore() //注意这个写在router.beforeEach 内部，写在外面有作用域问题const curToken = userStore.getTokenif (curToken) {if (to.path === '/login') {next({ path: DefaultRoute })done()} else {try {const codeArr = usePermission.getMenuPermission || []const filterDynamicRoutes = (routes: any) => {for (let len = routes.length - 1; len >= 0; len--) {if (Array.isArray(codeArr) && codeArr.includes(routes[len].meta.menuCode)) {// 说明都有continue} else {if (routes[len].children && routes[len].children.length > 0) {filterDynamicRoutes(routes[len].children)} else {routes.splice(len, 1)}}}}filterDynamicRoutes(asyncRoutes)next(to.path)} catch (error) {next(`${import.meta.env.VITE_BASE_REDIRECT_TO}?redirect=${to.path}`)done()}}} else {if (whiteList.includes(to.path)) {next()} else {done()}}
})

总结

在本文我们一开始了解了pinia是什么以及如果安装使用。接着结合使用pinia实现菜单权限控制的综合实例，来进一步了解pinia的使用。