记一次 addRoutes 实现动态路由的过程

Posted on

权限控制是后台管理系统常见的需求，vue2 版本有一个 addRoutes 方法可以动态添加路由，记录一下用此方法踩坑的过程。

实现过程

基本思路：初始路由是不需要权限的页面例如 login 页面等，登录成功后拿到用户信息（权限列表），筛选出对应的路由，用 addRoutes 将需要的路由加进来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var constRoutes = [
   {
    path: '/login',
    name: 'login',
    component: login,
    meta: {
      title: '登录'
    }
  },
  {
    path: '*',
    name: '404',
    component: () => import('../../views/page404')
    meta: {
      title: '404'
    }
  }
]

var router = new Router({
    routes: 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
32
const 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
18
var dynamicRoutes = [
    {
      path: '/home',
      component: () => import('../../views/home'),
      children: [
        {
            path: '/page1',
            component: () => import(/ '../../views/page1'),
            title: '页面一'
        },
        {
            path: '/page1',
            component: () => import(/ '../../views/page1'),
            title: '页面二'
        }
      ]
    }
  ]

用 addRoutes 添加到路由中：

1
2
vm.$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
12
var 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
8
computed: {
  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
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// permission judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

const whiteList = ['/login', '/authredirect']// no redirect whitelist

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        console.log('shi sm ');
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()
        } else {
          next({ path: '/401', replace: true, query: { noGoBack: true }})
        }
        // 可删 ↑
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})