[JavaScript知识库]VUE后台管理系统权限管理

VUE后台管理系统权限管理（面试路由守卫）

1.背景
后台管理系统中总会遇到权限分配的问题；这也是一道vue的很经典的面试问题
2.解决思路

• 权限管理无非前端或者后台解决
• 先说一下前端解决的思路；在设置路由的时候，先了解meta这个属性，meta的定义：简单来说就是路由元信息，也就是每个路由身上携带的信息。在meta中设置roles来分配权限，然后在main.js中用vue的routre.beforeEach;来检验我们这个路由。可以结合下面的代码来看，就很容易理解。
• 后台解决；后台解决的思路就是当登录之后前端将这个用户名传递给后台，后台接收之后，根据收到的数据来给用户返回相应的权限；浏览器开始根据收到的信息开始加载页面。（ps:就不附代码了）

    {
      path:'/Transp',
      name:'Transp',
      component:Transp,
      meta:{
        roles: 'AH'//这个页面用户AH有权限来看
      },
    },

   {
      path: '/Home',
      name: 'Home',
      component: Home,
      meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      }
    },

router.beforeEach((to,from,next)=>{
  console.log(to.meta.roles)
  if(to.meta.requireAuth == true){  //需要登录权限进入的路由
    if(store.state.token){  //取到登录信息
       next()
    }else if(sessionStorage.getItem('isLogin')){  //得到登录信息，进行下一步
      this.$router.push({name:'Home'}); //登录成功后跳转到的页面
      next();
    }else{
        next({name:'Login'});
    }
    // .includes(role)
  }else if(to.meta.roles){
    next({name:'Transp'})
  }else{  //不需要登录权限
    next();
  }
})