成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制

chaosx110 / 2084人閱讀

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

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

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

校驗(yàn)方式

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

路由不可見(jiàn)

元素不可見(jiàn)

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

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110297.html

相關(guān)文章

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

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

    fou7 評(píng)論0 收藏0

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

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

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

  • VUE知識(shí)點(diǎn)集錦

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

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

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

    APICloud 評(píng)論0 收藏0

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

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

    YorkChen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

chaosx110

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<