本文的做法是为了解决在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字段来判断
