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中的“復雜”代碼就卻步了，以后如果要想成為老大那樣厲害的人物，那就需要克服這一“頑固性”缺點。“因為喜歡，所以更加熱愛。”