vue3+ts使用pinia存储用户信息，并进行权限管理

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，非管理员去occurpants
        if (userStore.getUser().roles.some((item) => item.includes(':admin'))) {
          router.push('/dataoverview')
        } else {
          router.push('/occurpants')
        }
      }
    })
  }
}