vue 按鈕許可權 鑑權

2022-05-04 18:06:12 字數 1033 閱讀 9330

在實際專案開發中,登陸的賬號會有多種角色,例如操作員新增,審核員審批。每個角色的按鈕許可權都不相同,我們在開發中應該做好這一塊的許可權處理

首先使用者登入時,我們可以用過api介面獲取所有選單和按鈕的許可權,我們可以把所有按鈕資訊,儲存在sessionstorage中。

const authoritydata = 

// 將按鈕許可權資訊儲存起來,防止重新整理頁面時丟失

sessionstorage.setitem( "permission_button", json.stringify(authoritydata.buttons));

拿vue專案舉個栗子,我們可以通過v-if來實現許可權的控制,還是比較簡單有效的

修改
上面就實現了乙個簡單的前端按鈕許可權控制,但是有一丟丟不優雅,每次都要多定義乙個變數。怎麼解決呢?

我們可以定義乙個全域性的自定義指令,這樣**就大大的減少了,偷懶才是最舒服的。還是拿vue舉例畢竟我只會這個。

import vue from 'vue';

vue.directive('btnlimit',

}})// 大家可以把自己定義的指令寫在乙個directive.js檔案中,在main.js總入口引入下就可以了,簡單而不失優雅

我們不妨複習下其他幾個鉤子函式(都是複製vue官方文件,我也不懂啥意思,哈哈)乙個指令定義物件可以提供如下幾個鉤子函式 (均為可選):

好了,定義過了全域性自定義指令了,我們就可以在所有的vue元件中肆無忌憚的運用它了,不需要單獨引用了,是不是又省去了ctrl+c ctrl+v的時間?只可惜雙引號套著單引號有點不爽,可惜我也不會優化了。

修改

Vue路由鑑權

router index.js var router export default router newrouter 更多.let indexscrolltop 0router.beforeeach to,from next else else else if to.path document.ti...

Ant Design Pro 鑑權 許可權管理

ant design pro 1.0.0 v4 最近需要專案需要用掃碼登入,因此就使用antd pro提供的鑑權能力來做 authorized.ts 提供初始化路由元件和過載路由的函式 import renderauthorize from components authorized import ...

vue管理員鑑權

在路由裡面新增識別符號 isadmin true,和伺服器返回是否是管理員 聯合判斷 看vuex裡面的使用者資訊,是否是管理員,是管理員就全部是true 不是管理員,看當前路由資訊,的meta標籤 判斷是否是管理員 是就顯示,不是就不顯示 main style v show this.store.s...