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 ...
随机推荐
- Hibernate考试试题(部分题库)含答案
Hibernate考试试题 (题库) 1. 在Hibernate中,下列说法正确的有( ABC ).[选三项] A.Hibernate是一个开放源代码的对象关系映射框架 B.Hibernate对JD ...
- Swift、Objective-C 单例模式 (Singleton)
Swift.Objective-C 单例模式 (Singleton) 本文的单例模式分为严格单例模式和不严格单例模式.单例模式要求一个类有一个实例,有公开接口可以访问这个实例.严格单例模式,要求一个类 ...
- Servlet实现简单的登录页面
package emp; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; imp ...
- EasyUI开发的驾校管理系统
开源SmartLife驾校管理系统,地址:https://github.com/SmartOfLife/DriveMgr 1.界面布局是用的ymnets大神的界面,具体参考:http://www.cn ...
- hust1010 kmp
There is a string A. The length of A is less than 1,000,000. I rewrite it again and again. Then I go ...
- 使用HTMLParser爬取标签内容
以此网站为例 import urllib.request from html.parser import HTMLParser from html.entities import name2codep ...
- ui-router多视图+嵌套视图+传参综合练习
ui-router多视图:页面上存在的多个ui-view,它们以名字区分: 嵌套视图:一个ui-view的一个状态下对应了一个html,这个html里面又有一个ui-view. 视图之间传参:用ui. ...
- hdu4764 Stone 博弈
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4764 很水的博弈题目 代码: #pragma comment(linker, "/STAC ...
- weblogic java.lang.OutOfMemoryError: PermGen space 问题解决方法
文章转自:http://blog.csdn.net/cuihaiyang/article/details/6679735 最近安装了WebLogic10.3.4,测试在weblogic上部署项目,没过 ...
- 不依赖浏览器控制台的JavaScript断点调试方法
随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...