VUE后台权限

vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。

想当然的实现方案

用动态路由实现路由权限控制貌似是一个完美的方案，初始路由只有登录和404，登录后动态添加可用路由，同时将菜单数据保存到Vuex或本地用于实现动态菜单，关键节点大致如下：

//初始路由：
[{
  path: '/login',
  name: 'login',
  component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
  path: '/404',
  name: '404',
  component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
  path: '*',
  redirect: '/404'
}]

//登录逻辑
let vm = this;
axios.get('/login', vm.user).then((res) => {
    let extendsRoutes = filterRoutes(res.menus); 
    <!--
    //假设得到的可用路由如下
    [{
      path: '/',
      name: '首页',
      component: (resolve) => require(['../views/index.vue'], resolve),
      children: [{
        path: '/menus',
        name: '菜单管理',
        component: (resolve) => require(['../views/menus.vue'], resolve)
      }, {
        path: '/resources',
        name: '资源管理',
        component: (resolve) => require(['../views/resources.vue'], resolve)
      }]
    }]-->
    //存菜单
    sessionStorage.setItem('menus',JSON.stringify(extendsRoutes[0].children));
    //动态添加路由
    vm.$router.addRoutes(extendsRoutes);
    //跳转到应用界面
    vm.$router.push({path:'/'});
})

//首页获取菜单数据
this.menus = JSON.parse(sessionStorage.getItem('menus')); 
//用此数据循环菜单
..

前方有坑！！！！！！！！！！！！！！！！！！！！！！

第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页’/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。我们希望结果当然是跳转到’/login’，因此需要对这种情况做判断，在用户登录之前所有请求都要指向’/login’，这个判断可以在before钩子里做也可以在根组件里做，建议做在根组件的created回调里，核心代码大概这样：

let isLogin = sessionStorage.getItem('user');
if(!isLogin){
    return this.$router.push({path:'/login'});
}

这时候已经可以顺利登录了，登录后很快就会发现第二个坑，手动刷新页面又会跳到404，这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404，这个问题的根源是可用路由没有实现持久化，那么可以通过将路由数据存sessionStorage来解决，实例化之前如果检测到本地路由就直接合并路由，像这样：

//检测本地路由
let localRoutes = sessionStorage.getItem('routes');
if(localRoutes){
    router.addRoutes(JSON.parse(localRoutes));
}
//实例化
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

改进方案

既然不能存本地，那就每次刷新都重新从服务端获取，所以改进后的方案是本地存用户token，每次刷新要凭token从服务端重新获取用户信息和权限，然后动态更新路由，获取权限操作可以跟登录检测一起放在根组件的created回调中进行，确保访问任何路径都会先执行这一步，但因为获取权限是异步操作，在此之前仍然会经过应用初始化，所以还是会遇到404的问题，为此我们只需做一个小调整，将不匹配路径(‘*’)跳404的路由从初始路由中移除，动态更新路由时再把这个配置加进去，如下：

let userPath = ...//我们的动态路由
//注入时拼接404处理路由
this.$router.addRoutes(userPath.concat([{
  path: '*',
  redirect: '/404'
}]));