vue问题记录（三）：addRouter动态路由加载,,实现权限功能以及菜单的动态生成

这段时间一直在搞我们公司的二手车系统，然后在我快搞完的时候，竟然发现一个很大的问题 ，就是权限问题，一开始以为权限跟我没有关系，后台控制就好，后来，发现，事实不是这样的额，我得从后台获取权限，然后根据权限动态渲染一个菜单，听到这个消息，我真的急哭了，我也是一个菜鸟啊，问了后台，后台说这样，问了同学，同学说那样做，总之，我是没有想法，后来终于不枉我请假在家捉摸了一天，搞出来了，下面就把我的思路分享一下，

首先，我们得将后台的权限id跟我们的路由一对一，因为我们是根据id来判断是哪个权限的，那我们就得生成一个id跟路由的表，类似下图

其次，动态生成路由，因为我的需求，是登录后，进入后台管理系统，所以我是在登录成功的时候，获取权限，然后动态加载路由的

然后动态路由里面就有重定向的问题，因为动态的才菜单下面对应的内容，也是变化的，所有重定向的地方就不能写死了，这个地方，就要根据自己的实际需求来写了

这里配置好了，那动态的路由就配置成功了，然后就是生成动态的菜单的问题了

好像这样，就全都写完了，但是，不是这样的啊，刚刚的动态路由还存在一个问题，就是刷新的时候，就没了，所以我们得在刷新的时候，重新生成，那我们如何判断是刷新啊，这个时候是不是就想到了vuex,这个是全局的记录状态的，但是就一个不好，就是刷新的时候，就恢复原样了， 哈哈，这样刚刚好满足我们得需求啊，我们就是需要在刷新的时候重新加载一次动态路由，（但是吧，我们是希望登陆成功后，刷新进行添加，所以呢，在再加一个判断条件，等候成功后的标记，下下图代码）

然后在完善一下代码哈，当我们退出登录的时候，或者token 失效的时候，直接跳到登录页面，那就在beforeEach这个全局钩子函数里面写吧

// 拦截登录，token验证
router.beforeEach((to, from, next) => {

   if(to.path == "/login"){
           next();
   }else{
         let  token =  getCookie('token');
         if(token){
              next();
         }else{
              next('/login');
         }
   }
 })

当时代码逻辑写错了，一直在这里，循环，后来后台一语惊醒梦中人啊，搞定了，我应该先判断是否在登录页面，然后在判断是否失效，嗯嗯，结束了，附上一张效果图（部分）哈

毕竟第一次独自负责一个前端项目，还是有点紧张的，还有10天就 上线了，希望一切顺利啊，然后老大拿到融资，给我们涨工资。