vue addRoutes() 方法刷新之后失效

Question

我的项目需要用到权限控制：

举个例子:

• 用户'1'可以访问页面a和页面b，无法访问页面c和页面d。

• 用户'2'可以访问页面c和页面d，无法访问页面a和页面b。

我觉得可以使用 vue-router addRoutes() 方法去实现：

下面是比较核心的 login.vue里面的代码：

// more code

// User login success
sessionStorage.setItem('user', JSON.stringify(user));

// From server get the routes data
getRoutes().then(data => {

  // Routes data save in to sessionStorage
  sessionStorage.setItem('routes', JSON.stringify(data.routes));

  // Format data && created vue Router object
  let routes = this.routeCreater(data.routes);

  // addRoutes
  this.$router.addRoutes(routes);

  this.$router.push({ path: '/Index' });
})

// more code

登陆之后路由正常工作，但如果我刷新此页面（按“F5”键）。使用addRoutes()动态添加的路由都会失效，不能访问了。

新人求助，谢谢！

Answer 1

我也遇到了，我是将vuex保存到localstorage中
我使用了外部定义一个变量的方式来解决刷新就重新加载

let registerRouteFresh = true
router.beforeEach((to, from, next) => {
  // 部分代码  
  if (registerRouteFresh) {
    router.addRoutes(routes)
    store.commit('setRuleRoutes', _routes)
    registerRouteFresh = false
  }
})

Answer 2

vueRouter.onReady(()=>{

      vueRouter.addRoutes(currMenuList)
    })

vueRouter 就是 new Router的对象，我这样实现可以

Answer 3

在router.onReady中处理一下

Answer 4

可以参考一下这篇文章
F5之后需要重新动态添加。
https://segmentfault.com/a/11...

Answer 5

参阅这篇文章
解决addRoutes动态添加路由后，刷新失效问题
https://segmentfault.com/a/11...

Answer 6

代码实现
GitHub: vue 动态路由权限管理

思路

用户登录成后，把用户信息保存至localStorage 和 vuex，用addRutes动态添加路由。 然后用 localStorage 和 vuex相结合，解决用户刷新路由无效问题

用户登录
  ↓
  - 成功
    ↓
    - 把用户信息保存至vuex
    - 把用户信息保存至localStorage
    - 用addRutes动态添加路由并跳转至首页
  ↓
  - 失败
    ↓
    - 继续登录

拦截路由变化
  ↓
  - 判断vuex中是否有用户信息
    ↓
    - 有用户信息
      ↓
      - 验证token
        ↓
        - token验证通过
          ↓
          - 跳转路由
        ↓
        - token验证不通过
          ↓
          - 跳转登录页面
    ↓
    - 没有用户信息
      ↓
      - 判断localStorage中是否有用户信息
        ↓
        - 有用户信息
          ↓
          - 验证token
            ↓
            - token验证通过
              ↓
              - 获取localStorage用户信息
                ↓
                - 设置vuex中的用户信息
                ↓
                - 重新设置用户路由
            ↓
            - token验证不通过
              ↓
              - 跳转登录页面
        ↓
        - 没有用户信息
          ↓
          - 跳转登录

Answer 7

请问这问题你们解决了么