elememtui(有关权限的那些事)

时间：2022-02-14 14:50:47

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

业务情景描述：现有一个后台管理系统，共存在三种类型的人员，①超级管理员（称作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中的“复杂”代码就却步了，以后如果要想成为老大那样厉害的人物，那就需要克服这一“顽固性”缺点。“因为喜欢，所以更加热爱。”

相关文章