vue3實(shí)現(xiàn)按鈕權(quán)限管理的項(xiàng)目實(shí)踐
更新時間：2023年08月24日 09:01:58 作者：Apeng_0919
在做后臺管理系統(tǒng)時,經(jīng)常會有權(quán)限管理的功能,本文主要介紹了vue3實(shí)現(xiàn)按鈕權(quán)限管理的項(xiàng)目實(shí)踐,具有一定的參考價值,感興趣的可以了解一下
在做后臺管理系統(tǒng)時，經(jīng)常會有權(quán)限管理的功能，這里來記錄一下關(guān)于按鈕權(quán)限管理的實(shí)現(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)用指令；
這樣就可以實(shí)現(xiàn)按鈕權(quán)限了
到此這篇關(guān)于vue3實(shí)現(xiàn)按鈕權(quán)限管理的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)vue3按鈕權(quán)限管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue-class遷移vite的一次踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
最近學(xué)習(xí)了Vue3,利用vue3做了個好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
第一次使用webstrom簡單創(chuàng)建vue項(xiàng)目的一些報錯實(shí)戰(zhàn)記錄
在使用webstorm新建vue項(xiàng)目時常會遇到一些報錯,特別是新手第一次運(yùn)行項(xiàng)目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡單創(chuàng)建vue項(xiàng)目的一些報錯實(shí)戰(zhàn)記錄,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue參數(shù)的增刪改實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03