zoukankan      html  css  js  c++  java
  • VUE 动态注入路由白屏,再次刷新才显示页面问题

    问题描述:
       由于系统需要动态注入路由,刚开始在路由拦截里面根据账号权限动态获取路由,然后注入到本地路由中,代码如下:
     

    // 尝试获取本地 store 用户信息中权限字段
    const hasRoles = store.getters.roles && store.getters.roles.length > 0
    if (hasRoles) {
      next()
    } else {
      try {
        // 用token换取用户信息
        store.dispatch('user/getInfo').then(roles => {
          if (!roles) new Error('roles error!')
          // 根据获取的用户权限映射对应的路由信息
          store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
            if (!accessRoutes) new Error('accessRoutes error!')
            // 动态加入路由
            router.addRoutes(accessRoutes)
            // 确保路由完整性,设置replace 为true 这样导航就不会留下历史记录。
            next({
              ...to,
              replace: true
            })
          })
        })
      } catch (error) {
        // 删除本地token 并且重新登陆
        await store.dispatch('user/resetToken')
        Message.error(error || 'Has Error')
        next(`/login?redirect=${to.path}`)
        NProgress.done()
      }
    }

    这样写只有在登陆之后刷新页面才会动态注入,解决办法就是在登陆之后执行一下 红色字体部分代码

  • 相关阅读:
    初识函数作业
    HTTP协议那些事儿(Web开发补充知识点)
    文件操作
    文件操作作业
    深浅拷贝
    深浅拷贝作业
    小数据池 is和== 再谈编码
    小数据池/is和==/再谈编码作业
    如何用好 github 中的 watch、star、fork
    Navicat Premium Mac 12 破解(亲测可用!!!)
  • 原文地址:https://www.cnblogs.com/victorlyw/p/12419881.html
Copyright © 2011-2022 走看看