为了设置用户的访问权限,所以在一个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 > ) {
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 > ) {
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 > ) {
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;

  

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

  1. vue动态路由

    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.能够提供参数的路由即为动态路由第一步:定义组件 c ...

  2. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  3. vue——动态路由以及地址传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...

  4. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  5. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  6. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

  7. vue动态路由配置,vue路由传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...

  8. Vue动态路由 Get传值

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> < ...

  9. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

随机推荐

  1. Avro从入门到入土

    avro官网 1.Avro历史 Avro是Hadoop的一个数据序列化系统,由Hadoop的创始人Doug Cutting(也是Lucene,Nutch等项目的创始人)开发,设计用于支持大批量数据交换 ...

  2. hibernate中Session的load和get方法的区别是什么?

    主要有以下三项区别:  ① 如果没有找到符合条件的记录,get方法返回null,load方法抛出异常.  ② get方法直接返回实体类对象,load方法返回实体类对象的代理.  ③ 在Hibernat ...

  3. TTTTTTTTTTTTTTTTTTT CF 银行转账 图论 智商题

    C. Money Transfers time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. lcez校内模拟赛: 小R与苹果派——题解

    题目传送 首先对两个数组排序. 然后预处理出数组p[i]表示b[x]<a[i]的最大的x. 然后我们设f[i][k]表示对于前i个派,我单独选出来k组a[y]>b[y].(即此时有k组a& ...

  5. Keil工程Lib库文件的制作和运用

    最近看了百度手环开源项目,发现所有的算法都被封装成了一个lib文件在keil中调用 也是第一次学习到. 问题引出:为什么要做成lib库? 1.有些方案公司为了将自己写的关键部分源代码不进行公开,但是同 ...

  6. hive 分组排序函数 row_number() over(partition by " " order by " "desc

    语法:row_number() over (partition by 字段a order by 计算项b desc ) rank --这里rank是别名 partition by:类似hive的建表, ...

  7. 「WC 2007」剪刀石头布

    题目链接 戳我 \(Solution\) 直接求很明显不太好求,于是考虑不构成剪刀石头布的情况. 我们现在假设一个人\(i\)赢了\(x\)场,那么就会有\(\frac{x*(x-1)}{2}\) 我 ...

  8. JSON格式标准

    JSON格式 json的基本类型有objects(dicts), arrays(lists), strings, numbers, booleans, and nulls(json中关键字).在一个o ...

  9. 关于Spring3与Jdk8 遇到的问题ArrayIndexOutOfBoundsException:xxxxxx

    Spring 3不完全兼容JDK8. 需要升级到Spring 4才能使用Java 8 lambda表达式.

  10. Unknown tag (s:property)的原因

    今天在做struts2的练习,然后在jsp页面我使用<s:property value="name"/>竟然报错, 然后网上走了下,恍然大悟,我原来没有在jsp页面里面 ...