摘要：項(xiàng)目中按鈕權(quán)限注冊全局自定義指令來完成的。如果對自定義指令不熟的話可以查閱官方文檔。相關(guān)文章鏈接從到搭建后臺(tái)框架打包優(yōu)化從到搭建后臺(tái)框架優(yōu)化篇

首先還是謝謝各位童鞋的大大的贊贊，你們的支持是我前進(jìn)的動(dòng)力！上周寫了一篇從0到1搭建element后臺(tái)框架，很多童鞋留言提到權(quán)限問題，這一周就給大家補(bǔ)上。GitHub

現(xiàn)在大多數(shù)項(xiàng)目都是采用jwt授權(quán)認(rèn)證，也就是我們所熟悉的token登錄身份校驗(yàn)機(jī)制，jwt的好處多多，由于jwt是由服務(wù)端生成，中間人修改密串后，服務(wù)端會(huì)校驗(yàn)不過，安全有效。一般呆在請求頭上的Authorization里面。前端童鞋一般獲取token后通過vuex存儲(chǔ)起來，隨后數(shù)據(jù)持久化存到session中。

首先在路由跳轉(zhuǎn)的時(shí)候需要驗(yàn)證vuex是否存儲(chǔ)了token,如果沒有token的話直接跳到登陸頁面獲取token。

    if (to.path !== "/login" && !store.state.token) {
        next("/login")
        NProgress.done() // 結(jié)束Progress
      } else {
        next();
     }

詳細(xì)請看項(xiàng)目中的router.js

本地存在token之后，我們在每次請求接口的時(shí)候都需要帶上token來驗(yàn)證token的合法性。

    //在請求前攔截
    if (store.state.token) {
            config.headers["Authorization"] = "Bearer " + store.state.token;
        }

如果token不合法，全局錯(cuò)誤處理，直接跳到登陸頁面

     case 401:
        messages("warning", "用戶登陸過期，請重新登陸");
        store.commit("COMMIT_TOKEN","")
        setTimeout(() => {
            router.replace({
                path: "/login",
                query: {
                    redirect: router.currentRoute.fullPath
                }
            });
        }, 1000);
        break;

詳細(xì)代碼看項(xiàng)目中的request.js

本項(xiàng)目中，我主要是通過后端傳過來的角色類型來判斷導(dǎo)航菜單的顯示與隱藏。
也就是說首先前端請求接口，后端返回token,以及對應(yīng)的角色，比如項(xiàng)目中用admin登陸的話，roles=["admin"],用user登陸的話roles=["user"]。

接下來我這邊設(shè)計(jì)了一份菜單表和一份路由表，路由表主要是為了注冊路由，不需要考慮層級關(guān)系。而菜單表需要考慮層級關(guān)系，里面可以配置主菜單，子菜單，圖標(biāo)等等一系列的東西，當(dāng)然菜單表最好是通過接口數(shù)據(jù)從后端傳過來。值得注意的是無論是菜單表，還是路由表，里面都有一個(gè)meta配置項(xiàng)。里面可以配置我們的角色權(quán)限。路由表對應(yīng)的菜單表角色權(quán)限需要一致。沒有配置角色權(quán)限的菜單默認(rèn)都開放。

    {
        icon: "el-icon-question",
        index: "premission",
        title: "權(quán)限測試",
        subs: [{
            index: "permission",
            title: "菜單測試",
            meta: {
                roles: ["admin"]
            }
        },
        {
            index: "permissionBtn",
            title: "按鈕權(quán)限",
        },
    
        ]
    }

   {
      path: "/permission",
      component: getComponent("permission", "permission"),
      meta: {
        title: "菜單權(quán)限",
        roles: ["admin"]
      }
    },

現(xiàn)在我們開始編寫菜單邏輯，進(jìn)入Aside.vue,首先根據(jù)角色過濾菜單表menu.js

    /**
     * @param {Arrary} menus 菜單
     * @param {Arrary} roles 角色
     * @return {Arrary} res 過濾后的菜單
     */
    filterMenus(menus, roles) {
      const res = [];
      menus.forEach(route => {
        const tmp = { ...route };
        //hasPermission判斷權(quán)限是否匹配
        if (this.hasPermission(roles, tmp)) {
          if (tmp.subs) {
            tmp.subs = this.filterMenus(tmp.subs, roles);
          }
          res.push(tmp);
        }
      });
      return res;
    },

    /**
     * 通過meta.role判斷是否與當(dāng)前用戶權(quán)限匹配
     * @param roles
     * @param menu
     */
    hasPermission(roles, menu) {
      if (menu.meta && menu.meta.roles) {
        return roles.some(role => menu.meta.roles.includes(role));
      } else {
        return true;
      }
    },

    computed: {
        items() {
          let items = this.filterMenus(menu, this.$store.state.roles);
          return items;
        }
      },

這樣就獲得了權(quán)限菜單

到目前為止，權(quán)限控制基本完成，不過在項(xiàng)目運(yùn)行的過程中，還發(fā)現(xiàn)一個(gè)bug。本項(xiàng)目中存在一個(gè)tagList,也就是打開的導(dǎo)航標(biāo)簽，當(dāng)用戶從admin切換到user的時(shí)候打開的導(dǎo)航標(biāo)簽依舊存在，也就是說用戶可以通過導(dǎo)航標(biāo)簽進(jìn)入premission頁面。此時(shí)我這邊直接通過路由攔截來處理此時(shí)的情況。

    if(to.meta.roles){
        to.meta.roles.includes(...store.getters.roles)?next():next("/404")
      }else{
        next();
     }

沒有權(quán)限的頁面一律進(jìn)入404頁面。

按鈕級別的權(quán)限說實(shí)話一般都通過數(shù)據(jù)接口來控制是否展示，點(diǎn)擊等等情況。如果光有前端來控制絕對不是可行之道。

項(xiàng)目中按鈕權(quán)限注冊全局自定義指令來完成的。首先src下面新建一個(gè)directive文件夾，用于注冊全局指令。在文件夾下新建一個(gè)premissionBtn.js。如果對自定義指令不熟的話可以查閱官方文檔。

    import Vue from "vue"
    import store from "@/store/store"
    //注冊一個(gè)v-allowed指令
     Vue.directive("allowed", {
        inserted: function (el, bingding) {
            let roles = store.getters.roles
            //判斷權(quán)限
            if (Array.isArray(roles) && roles.length > 0) {
                let allow = bingding.value.some(item => {
                    return roles.includes(item)
                })
                if (!allow) {
                    if (el.parentNode) {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        }
    })

    import "./directive/premissionBtn"

那自定義指令如何使用呢？

     

        我是只有admin的時(shí)候才能顯示
        

        我是只有user的時(shí)候才能顯示
        

        我是admin或者user才能顯示
        

        任何角色都可以顯示
    

本項(xiàng)目還有許多需要完善和優(yōu)化的地方，最后項(xiàng)目存在著不足或者更好的方法，請及時(shí)提出來，方便修正。謝謝大家。

相關(guān)文章鏈接

從0到1搭建element后臺(tái)框架

（打包優(yōu)化）從0到1搭建element后臺(tái)框架優(yōu)化篇