vue --》动态路由的实现 （根据用户的权限来访问对应的模块）

　　为了设置用户的访问权限，所以在一个vue工程中，往往需要前端和后端开发人员共同配合设置动态路由，

进而实现根据用户的权限来访问对应的模块

　　1.首先在登录页面，前端跟据后端返回的路由信息进行配置，配置后存储到本地以便使用

login.vue页面
    在methods中:
　　//配置路由的方法
    getMenuList(){
　　　　　　　let menuList = '后端给你返回的数据'
     　　　　let sysRouter = [];
            let tempOne = {};
            menuList.filter((menuOne, indexOne) => {
                   tempOne = {};
                   tempOne.title = menuOne.name;  //这几个属性均为路由的一些配置项以及所用到的一些信息，根据实际情况进行编写
                   tempOne.icon = menuOne.icon;
                   tempOne.path = menuOne.perm;
                   tempOne.redirect = menuOne.url;
                   tempOne.children = [];
                   tempOne.component = Main;   //Main是个文件 每个页面都依赖于这个文件
                   let tempTwo = {};
                   if (menuOne.children.length > 0) {
                       menuOne.children.filter((menuTwo, indexTwo) => {
                       　　 tempTwo = {};
                           tempTwo.title = menuTwo.name;
                           tempTwo.path = menuTwo.url;
                           tempTwo.component = () => import(`@/pages${menuTwo.path}.vue`);
                           tempOne.children.push(tempTwo);
                       });
                    }
                   sysRouter.push(tempOne);
           });

 　　　　　　　sessionStorage.setItem("sysRouter", JSON.stringify(sysRouter));

    }，
　　//点击登录按钮的方法
　　submitBtn(){
　　　　let parm = {

                username: this.key,

                password: this.pwd,

             

            };

　　　　api.login(parm).then(res => {
　　　　　　　if(res){
　　　　　　　　　//首先将你的所需要的信息存储到本地，例如token，用户信息的等
　　　　　　　　　//调用配置路由信息的方法
　　　　　　　　　//然后跳转到首页
　　　　　　　　　//最后刷新一下页面，不然会白屏

                sessionStorage.setItem("loginToken", res.data.data.token);

　　　　　　　　　 this.getMenuList();

 　　　　　　　　　　this.$router.push({

                       path: "/home/home"

                  });

 

 　　　　　　　　　　setTimeout(()=>{

                       window.location.reload();

                  },50)

　　　　　　　}
　　　　})

　　　}

接下来就是最关键的一步 配置 router里面的index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';
import Main from '@/pages/Main.vue';

Vue.use(Router);


/*
 * 
 *  路由重复点击 警告问题解决
 *  
*/ 
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}



/*
 *---- 登录前不运行，刷新时运行，用addRoutes加载路由 begin ----
 */
let systemRouter = [];
let localRouter = window.sessionStorage.getItem('sysRouter'); //用于刷新时加载导航 功能和addRoutes等同1
if (localRouter) {
  //因为未登录 localRouter不存在，故不运行；只有刷新时才运行
  let localJsonRouter = JSON.parse(localRouter);
  systemRouter = localJsonRouter;
  systemRouter.filter(item => {
    //需要重新绑定 component
    item.component = Main;
    if (item.children.length > 0) {
      item.children.filter(itemTwo => {
        itemTwo.component = () => import(`@/pages${itemTwo.path}.vue`);
      });
    }
  });
} else {
  systemRouter = [];
}
/*
 *---- 登录前不运行，刷新时运行，用addRoutes加载路由 end ----
 */

// 定义其他路由 这一般都为3级路由
let otherRouter = [
  {
    path: '/menu2_0_1',
    title: '设计数据管理',
    icon: 'el-icon-s-opportunity',
    redirect: '/designDataManage/clientRequireManage',
    component: Main,
    children: [
      {
        path: '/designDataManage/clientRequireManage/requireFileList',
        title: '客户需求管理',
        component: () =>
          import(
            '@/pages/designDataManage/requireFileList/requireFileList.vue'
          )
      },
      {
        path: '/designDataManage/designDataManageHome/designDataList',
        title: '设计数据管理',
        component: () =>
          import(
            '@/pages/designDataManage/designDataList/designDataList.vue'
          )
      },
      {
        path: '/designDataManage/designDataManageHome/FLDataList',
        title: '设计数据管理',
        component: () =>
          import('@/pages/designDataManage/FLfileList/FLfileList.vue')
      },
      {
        path:
          '/designDataManage/designDataManageHome/workAfterFileList',
        title: '设计数据管理',
        component: () =>
          import(
            '@/pages/designDataManage/workAfterFileList/workAfterFileList.vue'
          )
      },
      {
        path: '/designDataManage/designDataManageHome/numFileList',
        title: '设计数据管理',
        component: () =>
          import(
            '@/pages/designDataManage/numFileList/numFileList.vue'
          )
      },
      {
        path: '/designDataManage/printFileManage/printFileList',
        title: '制版文件管理',
        component: () =>
          import(
            '@/pages/designDataManage/printFileList/printFileList.vue'
          )
      }
    ]
  },
  {
    path: '/menu3_0_1',
    title: '工艺数据管理',
    icon: 'el-icon-s-open',
    redirect: '/workDataMange/workDataMangeRepair',
    component: Main,
    children: [
      {
        path: '/workDataMange/workDataMangeRepair/workDataMangeList',
        title: '客户需求管理',
        component: () =>
          import(
            '@/pages/workDataMange/workDataManageList/workDataManageList.vue'
          )
      }
    ]
  },
  {
    path: '/menu4_0_1',
    title: '打样任务管理',
    icon: 'el-icon-s-order',
    redirect: '/printTaskManage/printTaskManageHome',
    component: Main,
    children: [
      {
        path:
          '/printTaskManage/printTaskManageHome/printTaskManageList',
        title: '编辑打样任务',
        component: () =>
          import(
            '@/pages/printTaskManage/printTaskManageList/printTaskManageList.vue'
          )
      }
    ]
  },
  {
    path: '/menu4_0_2',
    title: '打样任务管理',
    icon: 'el-icon-s-order',
    redirect: '/printOAManage/printOAManageHome',
    component: Main,
    children: [
      {
        path: '/printOAManage/printOAManageHome/prinOAkManageList',
        title: '编辑打样任务',
        component: () =>
          import(
            '@/pages/printTaskManage/printOAmanageList/printOAmanageList.vue'
          )
      },
      {
        path:
          '/printOAManage/printOAManageHome/prinOAkManageStartWorkList',
        title: '开工',
        component: () =>
          import(
            '@/pages/printTaskManage/prinOAkManageStartWorkList/prinOAkManageStartWorkList.vue'
          )
      },
      {
        path: '/printOAManage/printOAManageHome/paraDetail',
        name: 'paramaDetail',
        title: '工艺参数详情',
        component: () =>
          import(
            '@/pages/printTaskManage/prinOAkManageStartWorkList/paramaDetail.vue'
          )
      }
    ]
  },
  {
    path: '/menu5_0_2',
    title: '打样基线管理',
    icon: 'el-icon-s-order',
    redirect: '/printBasicLineManage/importantColorData',
    component: Main,
    children: [
      {
        path:
          '/printBasicLineManage/importantColorData/importantColorDataList',
        title: '关键颜色详情',
        component: () =>
          import(
            '@/pages/printBasicLineManage/importantColorDataList/importantColorDataList.vue'
          )
      }
    ]
  }
];

//声明路由对象，实例化VueRouter
const router = new Router({
  routes: [
    //登录路由
    {
      path: '/',
      name: 'login',
      component: () => import('@/pages/login.vue')
    },
    {
      path: '/error',
      name: 'error',
      component: () => import('@/pages/error.vue')
    },
    {
      path: '/resetPassword',
      name: 'resetPassword',
      component: () => import('@/pages/checkPassword/resetPassword.vue')
    },
    {
      path: '/checkNameAndEmail',
      name: 'checkNameAndEmail',
      component: () => import('@/pages/checkPassword/checkNameAndEmail.vue')
    },
    ...systemRouter,
    ...otherRouter
  ]
});

/* * 加载页面之前 钩子函数
 
   * 使用场景：一般用在跳转前需要做校验的地方
   * to:Route即将要进入的目标 路由对象；
   * from:Route当前导航正要离开的路由；
   * next:Function一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
   * 
*/
router.beforeEach(function (to, from, next) {
  store.dispatch('updateActItem', to.path);

  /*--- 动态绑定路由格式 begin ---*/
  let systemRouter = [];
  let localRouter = window.sessionStorage.getItem('sysRouter'); //用于刷新时加载导航
  //beforeEach，一步小心就进入到了他的死循环，浏览器都会崩亏，需要在一开始就加判断，拿到路由了，就直接next()，
  if (localRouter) {
    let localJsonRouter = JSON.parse(localRouter);
    systemRouter = localJsonRouter;
    systemRouter.filter(item => {
      //需要重新绑定 component
      item.component = Main;
      if (item.children.length > 0) {
        item.children.filter(itemTwo => {
          itemTwo.component = () =>
            import(`@/pages${itemTwo.path}.vue`);
        });
      }
    });
  } else {
    systemRouter = [];
  }
  if (window.sessionStorage.getItem('sysRouter') == null) {
    //不加这个判断，路由会陷入死循环 ！！！！
    router.addRoutes(systemRouter); //动态加载路由
  }



  store.dispatch('updateMenuList', systemRouter);
  next();
  /*--- 动态绑定路由格式 end ---*/
});
export default router;