vue-router 根据权限跳转路由

首先将路由更改，由路由变成配置文件

                           原来结构                            更改后结构

 

 

import Router from 'vue-router'//引用路由
import routerConfig from './router'//引用配置路由地址
Vue.use(Router)//使用路由

let router = new Router(routerConfig)//新建路由

let routesPath = [];//储存路由地址数组
routerConfig.routes[1].children.forEach((val)=>{
  routesPath.push(val.path)//添加地址
})

router.beforeEach((to, from, next) => {
    let enterpriseCode=sessionStorage.getItem('enterpriseCode')||''
    if ( to.path !== '/'&&enterpriseCode=='') {//判断是否登陆后跳转
      next({
        path: '/'
      })
    }else {
      if (sessionStorage.getItem('usermenu')) {
        // 获取跳转路由对应路由配置中的索引值
        let index = routesPath.indexOf(to.path);
        // 获取登录后返回可跳转路由权限
        let menus = JSON.parse(sessionStorage.getItem('usermenu')).menus;
        let menuId = [];
        menus.forEach((val)=>{
          menuId.push(val.vMenuId);
        })
        if (index === -1) {//跳转404
          next();
          return;
        }
        // 匹配系统管理之前的路由
        if (index <= 4 && menuId.includes(index+1)) {
          next();
        }
        // 匹配系统管理之后的路由
        else if(index > 4 && menuId.includes(index+2)) {
          next();
        }
        // 匹配返回的路由权限之外的路由
        else {
          next(from.path);
        }
      }else {
        next();
      }
    }
  })
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})