elememtui(有关权限的那些事)

前言:关于权限路由的那些事儿……

业务情景描述:现有一个后台管理系统,共存在三种类型的人员,①超级管理员(称作1);②组别管理员(2);③普通用户(3);每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。

过程:说难不简单,说简单并不难的过程

elememtui(有关权限的那些事)

【迷茫的前期】

上百度、Google,狂搜了好多关于权限的问题,也许是仁者见仁智者见智吧,五花八门的介绍让自己更加迷茫不堪,真心不知道从哪里下手:

1)让后端返回关于权限的json数据吧,但却不太懂这样的数据应该怎样处理;

2)在前端路由那里处理,可是不明白应该怎样使用何种属性来实现这个功能;

恍然大悟的最后

依靠各种微信群、QQ群试图解决自己遇见的各种问题,显然不太现实,但是如果可以作为一名热心帮助别人的人,其实也蛮有成就感的!

最终解决方案:

elememtui(有关权限的那些事)

elememtui(有关权限的那些事)

elememtui(有关权限的那些事)

【注意点】

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中的“复杂”代码就却步了,以后如果要想成为老大那样厉害的人物,那就需要克服这一“顽固性”缺点。“因为喜欢,所以更加热爱。”

上一篇:201521123113《Java程序设计》第14周学习总结


下一篇:C#转义字符总结