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
- Instagram 开源用于 Python 3的MonkeyType 工具
- 拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)
- jquery获取父级一级节点的序号
- Docker容器学习梳理--基础知识(2)
- Blend生成的TransformGroup如何引用?
- 今日头条写新闻机器人获吴文俊人工智能科技发明奖
- Docker容器学习梳理--应用程序容器环境部署
- 异步方式访问网页
- Silverlight:利用Panel实现自定义布局
- 《物联网智能终端信息安全白皮书》再次敲响物联网时代警钟
- Gitlab可视化代码树插件-Octotree
- 子线程调用UI线程的方法
- Silverlight:Dependency Property(依赖属性)学习笔记
- Silverlight:利用异步加载Xap实现自定义loading效果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 无聊的MISC题解
- MISC-convert | 旋转跳跃
- MISC-多彩
- Web-高明的黑客
- CVE-2017-7529 Nginx整数溢出漏洞分析
- 【Vulnhub】pegasus
- 2019-11-20-app专项测试【Android电量】Battery Historian耗电分析
- CVE-2017-7529 Nginx整数溢出漏洞分析2
- Redis find hot key 牛X!
- Python加水印
- 自动化运维实践 | Ansible变量
- Python-SSH日志审计
- 因 Redis 分布式锁造成的 P0 级重大事故,整个项目组被扣了绩效。。。
- Python-SSH日志分析
- 小记一次验证码绕过