vue路由權限和按鈕權限的實現(xiàn)示例
更新時間：2022年04月17日 08:28:38 作者：周金魚啊
本文主要介紹了vue路由權限和按鈕權限的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一 菜單路由權限
1.1前端路由配置表
1.2后端數(shù)據返回
1.3 拿到數(shù)據后存到vuex
1.4 扁平化的目的是為了跳轉路由時進行對比權限
//扁平化方法
flatten(data) {
return data.reduce((arr,{name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) =>
arr.concat([{name,id,resourceType,dimensionTypeCode,btnPermissions,path,},],
this.flatten(children)
),[]);
},1.5 el-menu中直接拿到vuex中的數(shù)據進行渲染 sidebar-item組件的代碼就不貼了
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="false"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route,index) in productMenuList"
:key="index"
:item="route"
:base-path="route.path"
/>
</el-menu>
//js部分
computed: {
productMenuList() {
if(this.$store.state.user.user.userMenu){
return this.$store.state.user.user.userMenu;
}
},
},1.6 router跳轉攔截判斷
router.beforeEach((to, _from, next) => {
document.title = "后臺系統(tǒng)-" + to.meta.title // 動態(tài)title
if (whiteList.includes(to.path)) {
next();
} else {
if (storageLocal.getItem("token")) {
if (hasPermission(to, store.state.user.user.menuTile)) {
next();
}
else {
next('/error/404')
}
}
else {
next({
path: "/login",
query: {
redirect: to.fullPath
}
})
}
}
})
//獲取是否有當前跳轉的菜單權限
function hasPermission(router, accessMenu) {
let menu = getMenuByPath(router.path, accessMenu);
if (menu.path) {
return true;
}
return false;
}1.7 getMenuBypath方法
這里我是拿path進行比對的，也可以拿name，只要是路由中唯一的都可以；
export const getMenuByPath = function (path, accessMenu) {
if (accessMenu) {
let filter = accessMenu.filter(res => {
return res.path == path;
})
return filter.length > 0 ? filter[0] : {}
}
}二 按鈕權限的實現(xiàn)
2.1后端返回的數(shù)據還是??那份
2.2 封裝自定義指令，新建hasPermissionbtn.js
import router from '../../router'
import store from '../../store'
export default (Vue) => {
/**自定義按鈕權限指令 */
Vue.directive('has', {
mounted(el, binding) {
//從配置獲取用戶按鈕權限
let path = router.currentRoute.value.path;
let menu = getMenuByPath(path, store.state.user.user.menuTile);
//獲取按鈕權限
if (!Vue.config.globalProperties.$_has(binding.value, menu.btnPermissions)){
//移除不匹配的元素
el.parentNode.removeChild(el)
// el.setAttribute("disabled",true)
}
},
})
//檢查權限方法
Vue.config.globalProperties.$_has = function (value, btnPermissions) {
let isExist = false
//有權限的按鈕集合；
let btnPermsArr = []
if (btnPermissions) {
btnPermsArr = btnPermissions;
}
if (btnPermsArr.includes(value)) {
isExist = true
}
return isExist
}
}2.3 權限按鈕中的使用
//v-has可以使用在任何元素上，如div或者el-table-column標簽 <el-button type="text" v-has="'env:account'">關聯(lián)</el-button>
到此這篇關于vue路由權限和按鈕權限的實現(xiàn)示例的文章就介紹到這了,更多相關vue路由權限和按鈕權限內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue-electron使用serialport時問題解決方案
這篇文章主要介紹了vue-electron使用serialport時問題解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
在許多應用程序中，我們經常需要執(zhí)行定期的異步任務輪詢，本文就介紹了Vue3如何處理異步任務輪詢，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了關于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文分享如何在Vue 3中實現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據的處理開始,一步步介紹布局的搭建和事件的實現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
v-model?是?Vue.js?中一個重要的指令,它提供了一種簡潔的方式來實現(xiàn)雙向數(shù)據綁定,下面小編就來帶大家深入了解下vue雙向數(shù)據綁定的原理與應用吧2023-09-09
vue2從數(shù)據變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據變化到視圖變化發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue怎樣獲得當前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue源碼之rollup環(huán)境搭建步驟詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue封裝組件js版基本步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04