前端VUE动态路由控制

谨以此篇文章记录处理vue项目的动态路由时遇到的坑 ，

动态路由分为两种

1，后端返回路由表的结构，前端只做渲染，这次记录不介绍这种方法

2，前端控制路由，静态路由和动态路由全部定义在router/index.js，这种情况又分为两类：1后端返回权限对应的菜单列表，2后端不返回菜单列表，只返回用户身份（角色：管理员或者普通用户）

一般情况都为第一种情况，但自己之前遇到的却是第二种情况（后端只返回用户身份），自己按照第一种的思路来处理，一度让路由拦截进入死循环

这是登录之后后端接口返回的数据

level:0代表用户身份是管理员，普通用户level:1 处理时按照之前处理后端返回角色对应的菜单列表的思维来做，在router.beforeEach进行拦截判断,让自己多次陷入路由拦截的死循环

ps:之前路由拦截时陷入死循环的错误操作：

router.beforeEach((from,to,next,)=>{
    if(res.data.data.content.level === 0){
        router.addRoutes('动态路由.concat(静态路由)')
        router.options.routes = 动态路由.concat(静态路由)
        next({...to,replace:true})
    }
})

正确做法应该在登录之后在vuex直接处理

SET_ASYNCROUTER(state,payload){
    router.addRoutes(payload)
    router.options.routes = payload
}

login({commit},requestData){
    if(res.data.data.content.level === 0){
        commit('SET_ASYNCROUTER',静态路由.concat(动态路由))
    }else{
        commit('SET_ASYNCROUTER',静态路由)
    }
}

解决动态路由刷新时候页面白屏的问题

因为新增的动态路由数据在vuex，所以刷新时会导致动态路由数据消失导致白屏 虽然vuex的时候将路由信息存进了sessionStroage,但是并没有存进去路由详细信息，比如meta,name值，利用vue插件即可以看到本地route的真实数据。所以添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由，（设置一个变量记录是否添加的布尔值，如果为false,则再执行一次添加动态路由的过程即可，然后next()）

   state = {
       isNext :false
   }
   mutations = {
       SET_ISNEXT(state,payload){
           state.isNext = payload
       }
       SET_ASYNCROUTER(state,payload){
           router.addRoutes(payload)
           router.options.routes = payload
           state.isNext = true
       }
   }
   actions = {
       againLogin({commit},requestData){
           if(requestData){
               commit('SET_ASYNCROUTER',动态路由.concat(静态路由))
           }
           resolve()
       }
   }
   
   
router.beforeEach((from,to,next)=>{
    if(!store.state.isNext){
        let flag = true
        store.dispatch('againLogin',flag).then(()=>{
            next({...to,replace:true})
        })
    }else{
        next()
    }
}