权限控制是后台管理系统常见的需求，vue2 版本有一个 addRoutes 方法可以动态添加路由，记录一下用此方法踩坑的过程。
实现过程
基本思路：初始路由是不需要权限的页面例如 login 页面等，登录成功后拿到用户信息（权限列表），筛选出对应的路由，用 addRoutes 将需要的路由加进来
1 | var constRoutes = [ |
登录成功后，将用户信息放到 vuex 里存储，1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32const auth = {
state: {
userInfo: null,
routes: []
},
getters: {
dynamicMenu: (state) => {
// 筛选菜单
},
dynamicRoutes: (state) => {
// 筛选路由
return data;
}
},
mutations:{
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo
}
}，
actions: {
setUserInfo ({ state, dispatch }, data) {
return new Promise(resolve => {
// 持久化存储
localStorage.userInfo = data;
dispatch('SET_USERINFO', data)
resolve()
})
},
},
}
export auth;
假设根据用户权限信息匹配筛选得到的路由如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18var dynamicRoutes = [
{
path: '/home',
component: () => import('../../views/home'),
children: [
{
path: '/page1',
component: () => import(/ '../../views/page1'),
title: '页面一'
},
{
path: '/page1',
component: () => import(/ '../../views/page1'),
title: '页面二'
}
]
}
]
用 addRoutes 添加到路由中：1
2vm.$router.addRoutes(dynamicRoutes);
vm.$router.push({path:'/page1'});
此时遇到第一个坑：当刷新页面时，会被重定向到404。因为刷新页面时 vue 会重新实例化，路由也会恢复到初始路由，匹配不到当前路由被重定向到404，所以要将404页面放到动态路由的最后。同时也需要将用户信息持久化，当刷新页面时，从持久化数据中拿到用户信息，获取到匹配到路由信息。
所以想到的处理办法是在 vuex 的 auth 里添加：1
2
3
4
5
6
7
8
9
10
11
12var userInfo = {};
if(localStorage.userInfo) { // 从持久化数据中取出用户信息
var userInfo = JSON.parse(localStorage.userInfo);
} else { // 不存在则跳转到登录页
router.push({name: 'login'})
}
const auth = {
state: {
userInfo: userInfo,
}
///...
}
在最外层APP.vue中添加1
2
3
4
5
6
7
8computed: {
dynamicRoutes() {
return this.$store.getters.dynamicRoutes
},
},
created() {
this.$router.addRoutes(this.dynamicRoutes)
}
这样在刷新时路由初始化的问题就解决了，退出登录的时候将本地的 userInfo 清空，然而还是想的太简单，第二个坑又来了：在退出登录跳转到登录页时，即使将 userInfo 清空了，但已经添加的路由还在，再次登录时会再重复添加路由信息，所以得想办法清空路由信息，而 vue-router 没有提供清空路由的方法，只能通过刷新页面来将路由初始化（因为userInfo 已经清空），此时退出登录的问题解决了。看了看网上开源的项目 vue-element-admin 使用 addRoutes 方法。
使用 addRoutes 实现动态路由的重点是：addRoutes在哪里调用？
之前的思路是在登录成功后调用一次，在系统最外层 App.vue 初始化的时候调用一次，将用户信息持久化，动态路由是根据用户信息计算得来，清空用户信息刷新页面时路由失效。vue-element-admin 实现是：在全局导航钩子里调用 addRoutes，根据用户是否登录（token）来判断，如果用户登录并且已经有用户信息（也就是拿到权限信息）则next()，避免重复添加路由。如果已经登录但没有用户信息说明是刷新了页面，此时先去获取用户信息然后调用 addRoutes。退出系统时将用户唯一标识 token 清掉并 reload 页面将路由清空。核心代码是：
1 | // permission judge function |
