国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從0到1搭建element后臺框架之權限篇

NervosNetwork / 1052人閱讀

摘要:項目中按鈕權限注冊全局自定義指令來完成的。如果對自定義指令不熟的話可以查閱官方文檔。相關文章鏈接從到搭建后臺框架打包優化從到搭建后臺框架優化篇

前言

首先還是謝謝各位童鞋的大大的贊贊,你們的支持是我前進的動力!上周寫了一篇從0到1搭建element后臺框架,很多童鞋留言提到權限問題,這一周就給大家補上。GitHub

一、jwt授權認證

現在大多數項目都是采用jwt授權認證,也就是我們所熟悉的token登錄身份校驗機制,jwt的好處多多,由于jwt是由服務端生成,中間人修改密串后,服務端會校驗不過,安全有效。一般呆在請求頭上的Authorization里面。前端童鞋一般獲取token后通過vuex存儲起來,隨后數據持久化存到session中。

路由跳轉驗證token

首先在路由跳轉的時候需要驗證vuex是否存儲了token,如果沒有token的話直接跳到登陸頁面獲取token。

    if (to.path !== "/login" && !store.state.token) {
        next("/login")
        NProgress.done() // 結束Progress
      } else {
        next();
     }
請求攔截帶上token

詳細請看項目中的router.js

本地存在token之后,我們在每次請求接口的時候都需要帶上token來驗證token的合法性。

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

如果token不合法,全局錯誤處理,直接跳到登陸頁面

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

詳細代碼看項目中的request.js

二、菜單權限

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

接下來我這邊設計了一份菜單表和一份路由表,路由表主要是為了注冊路由,不需要考慮層級關系。而菜單表需要考慮層級關系,里面可以配置主菜單,子菜單,圖標等等一系列的東西,當然菜單表最好是通過接口數據從后端傳過來。值得注意的是無論是菜單表,還是路由表,里面都有一個meta配置項。里面可以配置我們的角色權限。路由表對應的菜單表角色權限需要一致。沒有配置角色權限的菜單默認都開放。

menu.js
    {
        icon: "el-icon-question",
        index: "premission",
        title: "權限測試",
        subs: [{
            index: "permission",
            title: "菜單測試",
            meta: {
                roles: ["admin"]
            }
        },
        {
            index: "permissionBtn",
            title: "按鈕權限",
        },
    
        ]
    }
router.js
   {
      path: "/permission",
      component: getComponent("permission", "permission"),
      meta: {
        title: "菜單權限",
        roles: ["admin"]
      }
    },
根據角色過濾菜單

現在我們開始編寫菜單邏輯,進入Aside.vue,首先根據角色過濾菜單表menu.js

    /**
     * @param {Arrary} menus 菜單
     * @param {Arrary} roles 角色
     * @return {Arrary} res 過濾后的菜單
     */
    filterMenus(menus, roles) {
      const res = [];
      menus.forEach(route => {
        const tmp = { ...route };
        //hasPermission判斷權限是否匹配
        if (this.hasPermission(roles, tmp)) {
          if (tmp.subs) {
            tmp.subs = this.filterMenus(tmp.subs, roles);
          }
          res.push(tmp);
        }
      });
      return res;
    },
    /**
     * 通過meta.role判斷是否與當前用戶權限匹配
     * @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;
        }
      },

這樣就獲得了權限菜單

到目前為止,權限控制基本完成,不過在項目運行的過程中,還發現一個bug。本項目中存在一個tagList,也就是打開的導航標簽,當用戶從admin切換到user的時候打開的導航標簽依舊存在,也就是說用戶可以通過導航標簽進入premission頁面。此時我這邊直接通過路由攔截來處理此時的情況。

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

沒有權限的頁面一律進入404頁面。

三、按鈕權限控制

按鈕級別的權限說實話一般都通過數據接口來控制是否展示,點擊等等情況。如果光有前端來控制絕對不是可行之道。

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

全局指令
    import Vue from "vue"
    import store from "@/store/store"
    //注冊一個v-allowed指令
     Vue.directive("allowed", {
        inserted: function (el, bingding) {
            let roles = store.getters.roles
            //判斷權限
            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的時候才能顯示
我是只有user的時候才能顯示
我是admin或者user才能顯示
任何角色都可以顯示
后記

本項目還有許多需要完善和優化的地方,最后項目存在著不足或者更好的方法,請及時提出來,方便修正。謝謝大家。

相關文章鏈接

從0到1搭建element后臺框架

(打包優化)從0到1搭建element后臺框架優化篇

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103901.html

相關文章

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0
  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0
  • Spring Security

    摘要:框架具有輕便,開源的優點,所以本譯見構建用戶管理微服務五使用令牌和來實現身份驗證往期譯見系列文章在賬號分享中持續連載,敬請查看在往期譯見系列的文章中,我們已經建立了業務邏輯數據訪問層和前端控制器但是忽略了對身份進行驗證。 重拾后端之Spring Boot(四):使用JWT和Spring Security保護REST API 重拾后端之Spring Boot(一):REST API的搭建...

    keelii 評論0 收藏0

發表評論

0條評論

NervosNetwork

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<