vue3實現(xiàn)按鈕權(quán)限管理的項目實踐
更新時間：2023年08月24日 09:01:58 作者：Apeng_0919
在做后臺管理系統(tǒng)時,經(jīng)常會有權(quán)限管理的功能,本文主要介紹了vue3實現(xiàn)按鈕權(quán)限管理的項目實踐,具有一定的參考價值,感興趣的可以了解一下
在做后臺管理系統(tǒng)時，經(jīng)常會有權(quán)限管理的功能，這里來記錄一下關(guān)于按鈕權(quán)限管理的實現(xiàn)方法
1、自定義指令 v-permission。新建js文件用來寫指令代碼。
export default function btnPerms(app) {
app.directive('permission', {
mounted(el, binding) {
if (!permsJudge(binding.value)) {
el.parentNode.removeChild(el);
}
function permsJudge(value){
let perms = JSON.parse(localStorage.getItem('perms')) || [];
for (let item of perms) {
if (item === value) {
return true;
}
}
return false;
}
}
});
}2、在main.js里注入；
3、在登錄后臺時獲取后端返回的用戶權(quán)限數(shù)據(jù)，并且存入到本地；我這邊是把獲取數(shù)據(jù)的接口放在vuex中的
async _getUserPermission(contxt,payload){
let res = await getUserPermission();
if(res && res.data){
let {code,data,message} = res.data;
if(code == 200){
localStorage.setItem('perms',JSON.stringify(data.resourceList));
contxt.commit('getPerObj',data.resourceList);
}else {
reject(message)
}
}
}然后在登錄頁面調(diào)用這個方法；也可以直接在登錄頁面獲取數(shù)據(jù)，這里就不贅述了。
獲取的數(shù)據(jù)大概是這個格式
4、在需要判斷權(quán)限的按鈕調(diào)用指令；
這樣就可以實現(xiàn)按鈕權(quán)限了
到此這篇關(guān)于vue3實現(xiàn)按鈕權(quán)限管理的項目實踐的文章就介紹到這了,更多相關(guān)vue3按鈕權(quán)限管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue如何設(shè)置全局css文件以及css組合器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了解決vue中el-tab-pane切換的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑功能
在使用 Vue.js 開發(fā)后臺管理系統(tǒng)時，經(jīng)常會遇到需要使用路由標(biāo)簽頁的場景，這篇文章主要介紹了vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了VUE前端cookie簡單操作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本文主要介紹了Vue極簡生成器?Vuepress的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-06-06
這篇文章主要給大家介紹了基于axios請求封裝的vue應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
在項目里有個打印功能,將頁面的部分內(nèi)容打印出來,所以下面這篇文章主要給大家介紹了關(guān)于利用vue實現(xiàn)打印頁面的幾種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11