前端封装permission文件(路由前置守卫 后置守卫)

在实际开发中要对登录人的权限做限制，使其访问当前用户下的权限路由

//引入路由
import router from './router'
//网页加载显示插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//element ui
import { ElMessage } from 'element-plus'
//引入Cookies文件中储存的token    具体token需要根据项目实际开发设置
import { getToken } from '@/utils/auth'
//引入组件
import useUserStore from '@/store/modules/user'

//默认将加载显示插件属性设置为fales
NProgress.configure({ showSpinner: false });

//路由白名单  任何人都可以访问的路由路径  请根据项目自行添加
const whiteList = ['/login'];

//路由前置守卫
router.beforeEach((to,from,next)=>{
    NProgress.start()
if (getToken()) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (useUserStore().roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        useUserStore().getInfo().then(() => {
            //这里是封装的动态路由方法
          xxxxxx.then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            accessRoutes.forEach(route => {
              if (!isHttp(route.path)) {
                router.addRoute(route) // 动态添加可访问路由表
              }
            })
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          useUserStore().logOut().then(() => {
            ElMessage.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }

})

下面是引入的pinia文件（就是vue2中的vuex）

import {login, logout, getInfo} from '@/api/login'
import {getToken, setToken, removeToken} from '@/utils/auth'
const useUserStore = defineStore(
    'user',
    {
        state: () => ({
            token: getToken(),
            name: '',
            avatar: '',
            roles: [],
            permissions: [],
            id: '',
        }),
        actions: {
            // 登录
            login(userInfo) {
                const username = btoa(userInfo.username.trim())
                const password = btoa(userInfo.password)
                const code = userInfo.code
                const uuid = userInfo.uuid
                return new Promise((resolve, reject) => {
                    login(username, password, code, uuid).then(res => {
                        let data = res.data
                        setToken(data.access_token)
                        this.token = data.access_token
                        resolve()
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            // 获取用户信息
            getInfo() {
                return new Promise((resolve, reject) => {
                    getInfo().then(res => {
                        const user = res.data.user
                        // const avatar = (user.avatar == "" || user.avatar == null) ? defAva : user.avatar;
                        if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
                            this.roles = res.data.roles
                            this.permissions = res.data.permissions
                        } else {
                            this.roles = ['ROLE_DEFAULT']
                        }
                        this.name = user.userName
                        this.avatar = user.nickName;
                        this.id = user.userId;
                        resolve(res)
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            // 退出系统
            logOut() {
                return new Promise((resolve, reject) => {
                    logout(this.token).then(() => {
                        this.token = ''
                        this.roles = []
                        this.permissions = []
                        this.id = ''
                        removeToken()
                        resolve()
                    }).catch(error => {
                        reject(error)
                    })
                })
            }
        }
    })

export default useUserStore