vue 中後台許可權設計

2021-10-07 16:00:58 字數 1381 閱讀 7351

許可權控制是中後台系統常見的需求，一般指根據系統設定的安全規則或者安全策略，使用者可以訪問而且只能訪問自己被授權的資源。

以下demo的做法是將選單和路由結合起來，並接受後端傳回的使用者許可權資訊，通過對路由管理來做許可權的校驗，對於沒有通過許可權校驗的使用者進行提示或者跳轉到相應的頁面。

獲取當前使用者的許可權：

export function getcurrentauth()
驗證路由定義的許可權是否在當前使用者許可權中：

export function check(auth)
判斷使用者是否登入：

export function islogin()
在路由守衛中做判斷，根據路由設定的許可權，判斷使用者是否有訪問許可權：

import vue from 「vue」


import findlast form 「lodash/findlast 」


import nprogress form 「nprogress 」 // 頁面跳轉進度條元件


import layout from '@/layout'


import router form 「vue-router 」


import from 「/utils/auth」


vue.use(router )


cost router = new router(


] },


, ,});router.beforeeach((to, from, next) => 


const record = findlast(to.matched, record => record.meta.authority) // 獲取路由定義的許可權資訊


if (record && !check(record.meta.authority) ) )


} else if (to.path !== 「/403」) )


} nprogress.done(); // 結束進度條


} next();


});router.aftereach(() );


export default router
修改選單展示內容，只展示使用者擁有許可權的選單：

import  from 「/utils/auth」


methods:


...} }


}
頁面內部的許可權校驗方式，編寫許可權檢驗元件authorized：

並註冊該元件為全域性元件vue.component(「author」,author)

頁面中使用方法：

編輯

Vue後台許可權管理

許可權是對特定資源的訪問許可，所謂許可權控制，也就是確保使用者只能訪問被分配的資源 而前端許可權總的來說是請求許可權 請求的發起可能有下面兩種形式觸發 總的來說 所有的請求發起都觸發自前端路由或試圖 所以我們可以從這兩個方面入手 對觸發許可權的源頭進行控制 最終要實現目標是 前端許可權控制可以分為 ...

vue後台登入 許可權路由

技術棧 wepack 打包神器 vue js框架 vuex 實現不同元件間的狀態共享 注 簡述vuex和localstorage,全域性變數的區別 為了解決跨元件之間的資料共享問題,乙個元件的資料變化對映到使用這個資料的其他元件中,重新整理頁面之前儲存的vuex資料會被初始化掉.localstora...

vue 後台系統許可權管理

最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。首先說下這個系統前端用到的技術棧，vue全家桶,element ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後...