【项目实战】纯前端实现菜单权限以及功能权限控制

先来讲一下需求

   我们做项目的时候，最开始功能菜单都是从后端获取的，开发完毕之后，发现可以越权访问没有的路由，其操作是，

登陆高权限的账号，进入功能页，查询的数据，复制当前路由，再登陆低权限的账号，直接复制到地址栏，就能看到高权限账号的页面，

   这样后端就很头大了，由于只能对接口限制，后端监听不到当前路由是什么，而且接口还有复用的功能，做起来就很麻烦。我们就考虑了纯前端做路由权限

 

我先说一下原理，就是登陆账号都会有不同的菜单权限，通过登陆的账号不同做一个规定，账号类型1，权限标示就是1，账号类型2，权限标示就是2，这里账号类型指的就是，是系统管理员，还是普通用户，还是管理员的角色类型，等定义好这了以后，登陆的时候把当前角色存到vuex中，在每次进入路由之前，先判断这个功能路由有没有这个权限，有的话准许进入，没有的话跳转到首页，

 

 

 

好了，话不多说，上代码

在请求登陆的时候，拿到登陆信息，把该账户的权限放到vuex中

if(res.info[0].children.some(it => it.path == approvalHistory)){
                role = 4;
              }else if(res.info[0].children.some(it => it.path == vendorFirstTrial)){
                role = 1;
              }else if(res.info[0].children.some(it => it.path == vendorSecondTrial)){
                role = 2;
              }else if(res.info[0].children.some(it => it.path == vendorFinalTrial)){
                role = 3;
              }
              
              this.$store.commit("setRolePermissions",role)

在src >main.js,的目录下，写判断路由是否跳转到首页的代码

router.beforeEach((to,from,next)=>{
  let homePath = '/admin/home';
  if(to.meta.tabname){
    if(to.meta.keepalive){
      store.commit('pushCacheComp', to.name)
    }
    console.log(to.meta.role, store.state.rolePermission)
    // next();
    if(to.path == homePath || to.meta.role.includes(store.state.rolePermission)){
      next();
    }else{
      if(from.path != homePath){
        
      }
      next(homePath);
    }

接着在路由文件中写上该路由有什么权限  就是role

{
    path: '/admin/vendorFirstTrial',
    name: 'vendorFirstTrial',
    meta: {
      tabname: '厂商备案管理(初审)',keepalive: false,
      breadcrumb: '厂商备案管理(初审)',
      role: [1,5],
    },
    component: vendorFirstTrial
  },
  {
    path: '/admin/checkFirstTrial',
    name: 'checkFirstTrial',
    meta: {
      tabname: '查看厂商备案管理(初审)',keepalive: false,
      breadcrumb: '查看厂商备案管理(初审)',
      role: [1,5],
    },
    component: checkFirstTrial
  },

这样就可以通过不同账户来完美限制不能访问哪些路由了

 

如果你喜欢，请评论、点赞、收藏、转发，你的支持就是我的动力