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 ...
随机推荐
- LinkCode 下一个排列、上一个排列
http://www.lintcode.com/zh-cn/problem/next-permutation-ii/# 原题 给定一个若干整数的排列,给出按正数大小进行字典序从小到大排序后的下一个排列 ...
- Windows7系统的封装
系统装到虚拟机优化完成以后,可以装上自己想要装的软件,也可以不装做个纯净版的.今天用ES封装,首先打开一般我们只点这四项就够了,如下图 写上自己想写的,也可以不写系统默认,直接点“下一步”关闭设备管理 ...
- Composer 常用命令总结(三)
init(初始化) 该命令用于创建 composer.json 文件,并进行基础信息配置: $ composer init 可以配置Package name.Description.Author.Mi ...
- 字符型SQL注入
字符型SQL注入 很早就基于DVWA实现了字符型的SQL注入,但是一直感觉自己没有理解的特别清楚,这次又看了一下网上的一些讲解,试着总结一下.以下是我的一写浅薄见解,请大家批判着看. 基本原理 看 ...
- shop_list
#!/usr/bin/env python # -*- coding: utf-8 -*- #输出商品列表,用户输入序号,显示用户选中的商品 li = ["手机", "电 ...
- 云计算之路-阿里云上:负载均衡错误修改Cookie造成用户无法登录
最近陆续有用户反馈在我们网站上登录时遇到登录死循环问题.输入用户名与密码提交后,显示登录成功,但跳转到目标网址后(由于依然处于未登录状态)又跳转回登录页面,再次登录,再次这样...就这样一直循环,怎么 ...
- [.NET] 《Effective C#》快速笔记 - C# 高效编程要点补充
<Effective C#>快速笔记 - C# 高效编程要点补充 目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 ...
- hdu3709 Balanced Number 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题目大意就是求给定区间内的平衡数的个数 要明白一点:对于一个给定的数,假设其位数为n,那么可以有 ...
- C#中对于变量的声明和初始化
C#变量初始化是C#强调安全性的另一个例子.简单地说,C#编译器需要用某个初始值对变量进行初始化,之后才能在操作中引用该变量.大多数现代编译器把没有初始化标记为警告,但C#编译器把它当作错误来看待. ...
- 导入csv文件到数据库
csv:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本意味着该文件是一个字符 ...