VUE后台管理系统权限管理

最新推荐文章于 2024-08-05 11:30:09 发布

初秋-.-

最新推荐文章于 2024-08-05 11:30:09 发布

阅读量5.9k

点赞数 5

分类专栏： vue 文章标签： vue.js bootstrap javascript

本文链接：https://blog.csdn.net/weixin_44184780/article/details/123878134

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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();
  }
})