elememtui(有关权限的那些事)
前言:关于权限路由的那些事儿……
业务情景描述:现有一个后台管理系统,共存在三种类型的人员,①超级管理员(称作1);②组别管理员(2);③普通用户(3);每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。
过程:说难不简单,说简单并不难的过程
【迷茫的前期】
上百度、Google,狂搜了好多关于权限的问题,也许是仁者见仁智者见智吧,五花八门的介绍让自己更加迷茫不堪,真心不知道从哪里下手:
1)让后端返回关于权限的json数据吧,但却不太懂这样的数据应该怎样处理;
2)在前端路由那里处理,可是不明白应该怎样使用何种属性来实现这个功能;
恍然大悟的最后
依靠各种微信群、QQ群试图解决自己遇见的各种问题,显然不太现实,但是如果可以作为一名热心帮助别人的人,其实也蛮有成就感的!
最终解决方案:
【注意点】
1)在route.js中,自定义一个属性并为之附上自己的规则;
2)v-if 自定义函数:
...
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router v-show="!collapsed">
<template v-for="(item,index) in $router.options.routes" v-if="routesFun(item)">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><img :src="item.iconCls" style="vertical-align: middle;width: 17px;padding-right: 5px;"/>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="routesFun(child)"><img :src="child.iconCls" style="vertical-align: middle;width: 16px;padding-right: 5px;"/>{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
...
在 methods中写方法:
...
routesFun(item){ //权限展示判断条件
let loginType = admininfo.getType();
if(!item.hidden && loginType==1){ //超级管理员拥有所有权限
return true;
}
if(!item.hidden && item.route && item.route.indexOf(loginType)>=0){
return true;
}
return false; // if(!item.hidden){
// return true;
// }
// return false;
},
...
3)替换掉demo中的原方法即可;
4)看起来复杂的路由配置,就在前端处理掉了。
后言:其实听别人说再多的理论,也不如自己亲手写写代码试试
坦言自己处理这类问题的时候,考虑的的确没有老大想的周到,于是总是频繁出现问题,每每看见类似于Hme.vue中的“复杂”代码就却步了,以后如果要想成为老大那样厉害的人物,那就需要克服这一“顽固性”缺点。“因为喜欢,所以更加热爱。”
elememtui(有关权限的那些事)的更多相关文章
- Unix权限这点事
Unix/Linux的权限管理还是比较复杂的,别人说看高级环境编程得看2,3遍.我想这应该是在Linux有了一定基础.但是我看的过程中确需要反复推敲,有些地方得翻来覆去看上5,6遍甚至更多,下面是自己 ...
- .net程序和管理员权限的一些事
1.对某个方法设置管理员权限运行(未考证)(假的,必须以管理员权限启动,不然报错) [PrincipalPermission(SecurityAction.Demand, Role = @" ...
- linux中关于权限的一些事
权限这个东西对于初学者来说可能会有点陌生,不过不要紧,看完下面的讲解应该会对你有一定的帮助 权限rwx rwxrwxrwx u g o a r:可读 4 w: ...
- vue-router如何根据不同的用户给不同的权限
闲聊: 小颖去年在上家公司用的vue1.0之前在做路由这块用的router.map,但是现在vue2.0里已经不能用了,所以之前解决权限问题的例子,小颖也参考不了呜呜 之前看一个美女写的:elemem ...
- linux权限之su和sudo的差别
我们都知道非常多的文件都仅仅有root有权限来改动,那么在我们平时的开发过程中都建议使用一般账号来登录进行开发.还记得前面说到的ssh吗.我们也是将同意root登录设置成no.到必要的时候再切换到ro ...
- 【新手向】Centos系统文件权限的系统阐述与演示
在linux服务器日常管理中,我们会经常管理查看文件或者文件夹的权限内容以保证服务的正常运行.今天就和大家聊聊文件权限的那些事. 查看文件的权限情况可以用 ll 命令例: ll -d /kid #查看 ...
- iOS 三种录制视频方式
随着每一代 iPhone 处理能力和相机硬件配置的提高,使用它来捕获视频也变得更加有意思.它们小巧,轻便,低调,而且与专业摄像机之间的差距已经变得非常小,小到在某些情况下,iPhone 可以真正替代它 ...
- YII千万级PV架构经验分享--俯瞰篇--业务扩展演变
hello,大家好,我是方少,世上不如意事十有八九吧,即使你感到很满意,也有人感觉太差了,总得感觉我们技术人员都是一个人在战斗,感情却是最深的,一起吃过苦才难忘吧.娇妻艳女,你失意了会和你一起吃苦吗? ...
- 根据分析查看相关知识点分析iOS 三种录制视频方式
这篇文章讨论了关于如何配置视频捕获管线 (pipeline) 和最大限度地利用硬件性能的一些不同选择. 这里有个使用了不同管线的样例 app,可以在 GitHub 查看. 第一种:UIImagePic ...
随机推荐
- app测试特点
一.安装与卸载1.软件安装后是否可以正常运行:2.安装过程中是否可以中断3.安装空间不足时是否有相应的提示4.是否可以卸载应用(桌面卸载和应用卸载)二.权限测试1.扣费风险:包括发送短信.拨打电话.连 ...
- 探讨数据进行AES加密和解密以及.NET Core对加密和解密为我们提供了什么?
前言 对于数据加密和解密每次我都是从网上拷贝一份,无需有太多了解,由于在.net core中对加密和解密目前全部是统一了接口,只是做具体的实现,由于遇到过问题,所以将打算基本了解下其原理,知其然足矣, ...
- 配置RMAN备份环境
关于配置RMAN备份环境你可以给每个目标数据库设置一些固定的配置,这些配置控制着RMAN多个方面的行为.例如,你可配置备份的保存策略.默认的备份目录.默认的备份设备类型等.你可以用show命令来查看配 ...
- stl_alloc.h分配器
五.分配器:5.1.头文件: 5.1.1.include<stl_alloc.h> //内存的分配. 5.1.2.include<stl_construct.h> //对象的构 ...
- 2017Wow!新媒体营销深度分享会值得参加吗?
"Wow!新媒体营销深度分享会"是虎嗅打造的创新跨界营销平台,以引领营销趋势和洞察技术奇点为目标,推动前沿技术创新与营销的碰撞融合. 在这里,你将看到2017年最前瞻的营销趋势.最 ...
- mysql数据库面试总结
数据库优化 建表优化 1)数据库范式 l 第一范式(1NF):强调的是列的原子性,即列不能够再分成其他几列. 如电话列可进行拆分---家庭电话.公司电话 l 第二范式(2NF):首先是 1NF,另外包 ...
- Spring Boot 之构建Hello Word项目
1.创建一个maven项目 如下步骤: (第一步) (第二步) (第三步) 2.配置pom.xml文件 加载一些依赖包.字符集.指定jdk.编译插件. <project xmlns=" ...
- [刷题]算法竞赛入门经典 3-7/UVa1368 3-8/UVa202 3-9/UVa10340
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 都是<算法竞赛入门经典(第二版)>的题目,标题上没写(第二版) 题目:算法竞赛入门经典 3-7/UVa13 ...
- PS不能存储,因为程序错误
当PS中遇到不能存储文件,因为程序错误时,可以这样: http://www.zcool.com.cn/article/ZMTgwOTQw.html
- SpringData系列二 Repository接口
本节主要介绍Repository接口规范,及其子接口 Repository是一个空接口,即标准接口 若我们定义的接口继承了Repository,则该接口会被IOC容器识别为一个Repositoty B ...