vue-router的路由权限控制

2018-07-04 本文已影响75人 Young_Kind

本文的做法是为了解决在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 = false


import  {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字段来判断

vue-router的路由权限控制

猜你喜欢

热点阅读