为了账号安全,请及时绑定邮箱和手机立即绑定

vue-router的路由权限控制

本文的做法是为了解决在PC端管理系统中,不同角色登录时候动态加载对应的路由表来达到路由权限的控制

  • 方案1:路由跳转时,添加权限判断钩子,如果用户前往的页面不在权限列表内,则禁止跳转,这样写虽然也可以达到目的,但一旦系统角色多,这部分就会显得繁琐,难以维护

  • 方案2:本地只存储基本路由,如错误处理页面、无权限控制页面等,而权限路由则根据用户的token从服务器获取,服务器根据用户的权限下发相应的路由数据,客户端利用这些数据进行路由的动态生成和添加

本文的做法跟方案2思路一样,唯一不同的是路由表不是从服务端获取,而是在项目文件中新建文件来保存

本文先假设系统中有2种角色-管理员和普通用户
他们对应的路由表如下:

adminRoutersTable.js:

export const adminRoutersTable=[
  { path: '/adminPage1',name: 'adminPage1', component:  () => import('@/views/AdminUser/adminPage1')},
  { path: '/adminPage2',name: 'adminPage2', component:  () => import('@/views/AdminUser/adminPage2') },
  { path: '/normalPage3',name: 'normalPage3', component:  () => import('@/views/NormalUser/normalPage3'),auth:{userType:'admin'}},
  { path: '*',name: '404', component:  () => import('@/views/error/404') }
]

normalRoutersTable.js:

export  const normalRoutersTable=[
  { path: '/normalPage1',name: 'normalPage1', component:  () => import('@/views/NormalUser/normalPage1') },
   { path: '/normalPage2',name: 'normalPage2', component:  () => import('@/views/NormalUser/normalPage2') },
  { path: '/normalPage3',name: 'normalPage3', component:  () => import('@/views/NormalUser/normalPage3'),auth:{userType:'normal'}},
  { path: '*',name: '404', component:  () => import('@/views/error/404') }
  ]

系统初始路由配置

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({  routes: [
    { path: '/',name: 'HelloWorld', component:  () => import('@/components/HelloWorld') },
    { path: '/login',name: 'login', component:  () => import('@/views/login/login') },
  ]
})

需要特别注意的,如果404页面为静态路由,那么第一次进入页面时,这时动态路由还未加载,找不到路由地址会默认跳转到404错误页,体验很差,所以404路由先不写入路由规则中,和动态路由一起加载。

为解决浏览器刷新路由重置的问题,拿到token后要将其保存到sessionStorage或cookie中,根组件的created钩子负责检查本地是否已有token,如果有则无需登录直接用该token获取权限并初始化,如果token有效且当前路由有权访问,将加载路由组件并正确展现;若当前路由无权访问将按路由设置跳转404;如果token失效,后端应返回4xx状态码,前端统一为axios实例添加错误拦截器,遇到4xx状态码执行退出操作,清除sessionStorage数据并跳转到登录页,让用户重新登录。

main.js

import Vue from 'vue'import App from './App'import router from './router'import  Cookies from 'js-cookie'Vue.config.productionTip = falseimport  {adminRoutersTable} from '@/router/adminRoutersTable';//管理员路由表import  {normalRoutersTable} from '@/router/normalRoutersTable';//普通用户路由表new Vue({  el: '#app',
  router,  components: {App},  template: '<App/>',
  created() {  
//一旦刷新浏览器就会执行这里
      console.log('刷新') 
//下面这段代码在实际开发中应该封装起来,因为在登陆的时候也会用到//登陆成功则在cookie中设置对应的token值,然后执行类似下面的代码//注意:这里的this.$router.addRoutes是vue-router2.2版本后才有的方法
      if(Cookies.get('user_token')){            switch (Cookies.get('user_token')){              case 'admin':                this.$router.addRoutes(adminRoutersTable);                break;              case 'normal':                this.$router.addRoutes(normalRoutersTable);                break
              default:                break;
            }
      }else{        this.$router.repalce('/login')
  }
  },
  mounted() { /* 在这发起后端请求,拿回数据,配合路由钩子做一些事情 */
  }
})

还有一种情况需要注意:管理员与普通用户共同拥有某个路由界面,但因为操作权限不同,可能界面上某个操作按钮对于管理员是可见的,但对于普通用户来说是不可见的。
解决方式:在那个路由记录中添加一个自定义的auth字段来判断



作者:Young_Kind
链接:https://www.jianshu.com/p/9c1a7ee4cce2


点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消