vue3+element-plus角色权限管理分配

这里的图片是截图这个老师的项目
为了方便大家使用,我会在每个图片下面将代码原封不动打一遍

在src/uitls/permission.js加入以下内容

本段代码讲解:
参数一:后台传来的路由
参数二:前端所有的路由
先遍历前端所有路由,在里面继续遍历后台路由,通过二者某一个关键字的是否相同判断用户是否有权限(这里老师使用的是title关键字),关键字相同理论是可以直接追加了,但是考虑到二级或者三级子内容存在,这里老师做了个递归处理,就是如果当前元素有children属性就给当前元素children属性来个递归处理,最终返回的值就是当前权限所能访问的值

以下内容和上面图片一致,方便拷贝使用

/**
* 参数1:后台传来的关键字数组,参数二:全部路由数据
*/
export function comparation(userRouter=[],allRouter=[]){
  let realRouter = []
  allRouter.forEach(item=>{
    userRouter.forEach(v=>{
      if(item.meta,title===v.title){
        //注意children
        if(item.children && item.children.length>0){
          item.children=comparation(v.children,item.children)
        }
        realRouter.push(item)
      }
    })
  })
  return realRouter
}

这个代码是在vuex里面写的,基本都有注释

代码解释: 这段代码老师定义了路由集合数据,是真正的需要展现到页面的数据(这里老师还用了个导航菜单,本人没用到,直接通过路由生成的菜单,后台传过来的数据或者前台定义的路由表每个人都不一样,这个主要是理解这个权限管理思路),中间的mutation定义了路由表和菜单的设置与消失,在action里面的方法才是真正的核心,里面发送了当前用户的角色的请求,然后引入刚刚上面模块定义的方法给用户设置权限,最后添加到vuex和路由中

以上两张图片是连在一起的
以下内容和上面两张图片一致,方便拷贝使用

import { comparsion } from "@/uitl/comparsion";
export default {
  namespaced: true,
  state: {
    routerList: null, //真正的路由
    sideBar: [], //导航菜单
  },
  mutations: {
    set_routerList(state, data) {
      state.realRouter = data;
    },
    clear_routerList(state, data) {
      state.realRouter = null;
    },
    set_sideBar(state, data) {
      state.sideBar = data;
    },
    clear_sideBar(state, data) {
      state.sideBar = [];
    },
  },
  actions: {
    async gat_routers({ commit }, data) {
      //获取比对路由
      let routers = await login("/login", { username: "admin" }).then((res) => {
        return res.data.router;
      });
      //导航菜单
      commit("set_sideBar", routers[0].children);
      // 比对路由(参数一是上面后台返回的关键字数组,参数二是所有路由,需要导入)
      let realRouter = comparation(routers, allRouter);
      console.log(realRouter);
      // 存储到vuex
      commit("set_routerList", realRouter);
      // 动态添加路由
      router.addRoutes(realRouter); //这是vue2写法,vue3版本的router4版本没有addRoutes,只有addRoute
      //以下是我本人的写法(vue-router4版本只能通过循环一个一个加)
      // realRouter.forEach((item) => {
      //   router.addRoute(item);
      // });
    },
  },
};

这里老师做了前置守卫

代码说明:
在每次路由跳转都去获取一次角色身份(这点个人不太建议,其一:每次路由更改都要获取请求和添加路由表等,感觉麻烦,本人在路由父级(第一层路由)那里设置onMonend生命周期去调用的)

以下内容和上面图片一致,方便拷贝使用

router.beforeEach((to, from, next) => {
 if(!getToken()){ //没有登录
  if(to.meta.token){//需要登录
    next({
      path:"/login"
    })
  }else{
    next()
  }
 }else{ //登录
    //判断权限
    if(!store.state.permission.routerList){//没有路由
      //获取路由
      store.dispatch('permission/gat_routers').then(()=>{
        console.log(1000);
        next()
      })
    }
 }
})

这里附上老师的视频教程,只需要看我链接这个后半部分视频就够了,前面没啥用,后半部分是核心

本人遇到的bug

在路由前置守卫中动态添加路由，刷新路由页面一片空白找不到页面，表示在路由添加之前就已经在访问路由了，同时经查阅官方文档看到有一个提示

在代码中，router.addRoute的触发是在路由导航守卫中检测到当前未保存动态菜单信息（vuex）。在这之后用next()放行，而根据官方提示和控制台相关打印信息可以看到，warn提示在addRouter添加路由之前，所以解决方法是将next()改为next(to)，触发新的一个导航，此时可以正确匹配到动态路由的相应地址。这个next(to)放在添加路由的vuex方法后

   store.dispatch('permission/gat_routers').then(()=>{
        console.log(1000);
        next(to)  //这样可解决白屏问题
      })