Vue項目實現簡單的權限控制

fou7 發布于2019-08-02 15:34 / 3561人閱讀

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

在Vue項目中實現權限控制管理

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

校驗方式

前端對用戶的權限信息進行校驗往往在兩個方面進行限制

路由不可見

元素不可見

通過以上兩個方式，來將用戶權限之外的內容隱藏掉。

路由不可見實現方法

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

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

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

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

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

元素不可見實現方法

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

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

在需要控制顯示的組件上我們就可以通過v-acl進行權限控制

GPU云服務器云服務器簡單的asp項目 js實現的簡單特效用c實現簡單的shell java實現簡單的web服務器

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

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

Vue項目實現簡單的權限控制

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

chaosx110 2019-08-26 18:37 評論0 收藏0
手摸手，帶你用vue擼后臺系列二(登錄權限篇)

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

不知名網友 2019-08-20 16:45 評論0 收藏0
VUE知識點集錦

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

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

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

APICloud 2019-08-02 14:34 評論0 收藏0
關于前后端分離權限控制，元素細粒度（iview-admin實現）

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

YorkChen 2019-08-23 15:39 評論0 收藏0