成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue項目實現(xiàn)簡單的權(quán)限控制

fou7 / 3569人閱讀

摘要：路由不可見實現(xiàn)方法在中的字段中加入該路由的訪問權(quán)限列表字段。元素不可見實現(xiàn)方法因為某些頁面中會有一些特殊的接口調(diào)用或數(shù)據(jù)展示受到權(quán)限控制顯示。

在Vue項目中實現(xiàn)權(quán)限控制管理

對于一般稍大一些的后臺管理系統(tǒng)，往往有很多個人員需要使用，而不同的人員也對應(yīng)了不同的權(quán)限系統(tǒng)，后端的權(quán)限校驗保障了系統(tǒng)的安全性，而前端的權(quán)限校驗則提供了優(yōu)秀的交互體驗。

校驗方式

前端對用戶的權(quán)限信息進(jìn)行校驗往往在兩個方面進(jìn)行限制

路由不可見

元素不可見

通過以上兩個方式，來將用戶權(quán)限之外的內(nèi)容隱藏掉。

路由不可見實現(xiàn)方法

在router.js中的meta字段中加入該路由的訪問權(quán)限列表auths字段。

{
    path: "edit",
    name: "edit",
    meta: {
        title: "編輯賬戶",
        auths:["edit_account"]
    },
    component: () => import("pathToComponent/component.vue"),
},

Vue.router中提供了導(dǎo)航守衛(wèi)，我們這里使用全局前置守衛(wèi)對路由跳轉(zhuǎn)進(jìn)行權(quán)限校驗
router.beforeEach(to,from,next)
參數(shù)to是即將進(jìn)入的路由對象，我們可以在對象中拿到之前在router.js中定義的route對象，并獲得auths字段

router.beforeEach((to,from,next)=>{
    const hasAuth = function(needAuths，haveAuths){     //判斷用戶是否擁有權(quán)限的function
        // implement 
    }
    const havaAuths = []; // 用戶擁有的權(quán)限列表
    if(!hasAuth(to.meta.auths,haveAuths)){
        //沒有權(quán)限重定位到其他頁面，往往是401頁面
        next({replace:true,name:"otherRouteName"})
    }
    //權(quán)限校驗通過,跳轉(zhuǎn)至對應(yīng)路由
    next();
})

在有側(cè)邊欄的后臺管理中，還需要對側(cè)邊欄的路由導(dǎo)航進(jìn)行隱藏，這里同樣是通過拿到route.meta.auths字段進(jìn)行過濾。

元素不可見實現(xiàn)方法

因為某些頁面中會有一些特殊的接口調(diào)用或數(shù)據(jù)展示受到權(quán)限控制顯示。前端通過控制元素的展示來隱藏掉用戶不具有權(quán)限的元素，避免點擊了某一個button導(dǎo)致接口401報錯這樣不友好的交互體驗。
全局注冊一個directive。

//acl.js
const aclDirective = {
    inserted:function(el,binding){ // 在被綁定的元素插入到dom中時
        const hasAuth = function(needAuths，haveAuths){ //判斷用戶是否擁有權(quán)限的function
            // implement 
        }
        const havaAuths = []; // 用戶擁有的權(quán)限列表
        if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以獲得綁定指令時傳入的參數(shù)
            el.style = "display:none"; //修改元素的可見狀態(tài)
        }
    }
}
//main.js
Vue.directive("acl",aclDirective); //全局注冊指令

在需要控制顯示的組件上我們就可以通過v-acl進(jìn)行權(quán)限控制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54216.html

相關(guān)文章

  • Vue項目實現(xiàn)簡單的權(quán)限控制

    摘要：路由不可見實現(xiàn)方法在中的字段中加入該路由的訪問權(quán)限列表字段。元素不可見實現(xiàn)方法因為某些頁面中會有一些特殊的接口調(diào)用或數(shù)據(jù)展示受到權(quán)限控制顯示。 在Vue項目中實現(xiàn)權(quán)限控制管理 對于一般稍大一些的后臺管理系統(tǒng)，往往有很多個人員需要使用，而不同的人員也對應(yīng)了不同的權(quán)限系統(tǒng)，后端的權(quán)限校驗保障了系統(tǒng)的安全性，而前端的權(quán)限校驗則提供了優(yōu)秀的交互體驗。 校驗方式 前端對用戶的權(quán)限信息進(jìn)行校驗往往...

    chaosx110 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)

    摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務(wù)端提交賬號和密碼進(jìn)行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄，不過在前 完整項目地址：vue-element-admin 系列文章： 手摸手，帶你用vue擼后臺 系列一（基礎(chǔ)篇） 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺 系列三 (實戰(zhàn)篇) 手摸手，帶你用vu...

    不知名網(wǎng)友 評論0 收藏0

  • VUE知識點集錦

    摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

    Tecode 評論0 收藏0

  • VUE知識點集錦

    摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

    APICloud 評論0 收藏0

  • 關(guān)于前后端分離權(quán)限控制，元素細(xì)粒度（iview-admin實現(xiàn)）

    摘要：按鈕方面按鈕通過自定義指令綁定其特定的操作接口信息如產(chǎn)品上傳按鈕，需要擁有產(chǎn)品上傳的信息，才可以繼續(xù)執(zhí)行按鈕的業(yè)務(wù)邏輯。 開篇啰嗦幾句 在傳統(tǒng)單體項目中，通常會有一些框架用來管理熟知的權(quán)限。如耳濡目染的 Shiro 或者 Spring Security 。然而，到了現(xiàn)在這個時代，新開始的項目會更多的才用后端微服務(wù) + 前端 mvvm 的架構(gòu)開始書寫項目。權(quán)限控制方面將變得有些許晦澀。當(dāng)...

    YorkChen 評論0 收藏0

發(fā)表評論

0條評論

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