1、先在vue3项目中下载pinia

npm install pinia

2、main.ts中添加pinia

import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(router)
app.use(pinia)
app.mount('#app')

3、创建user.ts对登录用户进行管理（UserInfo为自定义对象）

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import { ref, reactive, onMounted } from 'vue'
import type {UserInfo} from '@/model/projectmodel'export const useUserStore = defineStore('user', {state: () => ({user: {id:"",username:"",password: "",salt: "",roles: [],permissions: []}}),actions: {setUser(user:UserInfo) {this.user = user;},getUser() {return this.user;}}
});

4、创建permissions.ts管理用户的角色和权限

// permissions.ts
import type{ RouteLocationNormalized,NavigationGuardNext } from 'vue-router';
import { useUserStore } from '@/router/user';
import type {UserInfo} from '@/model/projectmodel'export function hasRoles(userRoles: string[], requiredRoles: string[]): boolean {//如果路由没有配置角色，那么可以直接访问if (requiredRoles == undefined || requiredRoles.length == 0){return true}//如果用户没有角色，则不能访问所有路由if (userRoles.length == 0){return false}return requiredRoles.some(role => userRoles.includes(role));
}export function hasPermissions(userPermissions: string[], requiredPermissions: string[]): boolean {return requiredPermissions.every(permission => userPermissions.includes(permission));
}/*** 获取用户的角色信息* @param userStore 登录的用户信息* @returns */
export function getUserRoles(userStore):string[] {return userStore.getUser().roles
}/***  获取用户的权限信息* @param userStore 登录的用户信息*/
export function getUserPermissions(userStore):string[]{return userStore.getUser().permissions}/*** 是否登录* @param userStore 登录的用户信息* @returns */
export function isLoggedIn(userStore){return userStore.getUser().id != "" ? true : false
}export function routeGuard(to: RouteLocationNormalized, from: RouteLocationNormalized,next:NavigationGuardNext): void {//用户const userStore = useUserStore()const requiresAuth = to.meta.requiresAuth;const userRoles = getUserRoles(userStore); // 获取用户的角色信息if (to.path === '/Login' ){next();return;}if ( !isLoggedIn(userStore)) {next('/Login')}else if (to.path === '/NoPermission'){next();return;}else if (!hasRoles(userRoles, to.meta.requiredRoles)) {// 如果需要特定角色但用户角色不匹配，则跳转到 403 页面// router.push({ name: 'Forbidden' });next('/NoPermission')}else {// 其他情况下，允许访问路由next();}
}

to.meta.requiresAuth;的值来源于router文件夹的index.ts的路由配置：    
{path: '/projectview',name: 'projectview',component: projectview,meta: {requireAuth: true, // 需要登录验证requiredRoles: ['admin', 'editor'],}},

5、在router的index.ts中调用4步骤配置的routeGuard

router.beforeEach(routeGuard)
export default router

6、登录的时候把用户信息放入userStore

function signIn() {if (pageData.user.username == '' || pageData.user.password == '') {message.warn('请填写用户名或密码！')} else {loginn(pageData.user).then((loginResult) => {//账户或密码错误if (loginResult.data.code == 500) {message.warn(loginResult.data.msg)} else if (loginResult.data.code == 200) {userinfo = loginResult.data.data// sessionStorage.setItem('isLoggedIn', 'true')userStore.setUser(userinfo)//管理员去dataoverview，非管理员去occurpantsif (userStore.getUser().roles.some((item) => item.includes(':admin'))) {router.push('/dataoverview')} else {router.push('/occurpants')}}})}
}