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

时间:2019-11-13
本文章向大家介绍vue --》动态路由的实现 (根据用户的权限来访问对应的模块),主要包括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.$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;

  

原文地址:https://www.cnblogs.com/wangqi2019/p/11851700.html