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