溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目背景：物業管理后臺，不同角色擁有不同權限
采用技術：Vue.js + Vuex + Element UI
實現 RBAC 權限管理需要后端接口支持，這里僅提供前端解決方案。
因代碼篇幅較大，對代碼進行了刪減，文中 “...” 即為省略的一部分代碼。
大致思路：
首先登錄成功后，從后臺拉取用戶當前可顯示的菜單和可用權限列表，分別將其存入 store 的 nav（菜單導航） 和 auth（用戶可用權限） 中，在用戶切換路由時，判斷是否存在 auth ，如果不存在，則重新獲取，判斷當前訪問地址 to.meta.alias 是否在用戶可用權限列表中，如果不存在，則提示無權限，否則進入路由。
1. 路由與側邊菜單分離
側邊菜單相關代碼 Main.vue
<template>
<!-- ... -->
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!--導航菜單-->
<el-menu :default-active="$route.path"
class="el-menu-vertical-aliyun"
@open="handleopen"
@close="handleclose"
@select="handleselect"
:collapse="collapsed"
unique-opened router>
<template v-for="(item,index) in nav">
<!-- 二級菜單 -->
<el-submenu :index="index+''"
v-if="item.children && item.children.length > 0">
<!-- 二級菜單頂級 -->
<template slot="title">
<i :class="['icon',item.iconCls]"></i>
<span slot="title">{{item.name}}</span>
</template>
<!-- 二級菜單下級 -->
<el-menu-item-group>
<!--<span slot="title">{{item.name}}</span>-->
<!-- && child.url-->
<template v-for="child in item.children">
<!--無三級菜單-->
<el-menu-item
:index="child.url"
:key="child.url"
v-if="!child.children">
{{child.name}}
</el-menu-item>
<!--有三級菜單-->
<el-submenu
:index="child.url"
:key="child.url"
v-if="child.children">
<span slot="title">{{child.name}}</span>
<el-menu-item v-for="subChild in child.children"
:index="subChild.url"
:key="subChild.url">
{{subChild.name}}
</el-menu-item>
</el-submenu>
</template>
</el-menu-item-group>
</el-submenu>
<!-- 一級菜單 -->
<el-menu-item v-if="!item.children"
:index="item.url">
<i :class="['icon',item.iconCls]"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</aside>
<!-- ... -->
</template>
<script>
export default {
// ...
computed: {
// 從 Vuex 中獲取導航菜單
nav() {
return this.$store.state.nav;
}
}
// ...
}
</script>
2. 路由切換前進行鑒權
路由定義的部分代碼，對每個路由添加了 meta 屬性，用于鑒權。
這里 component 采用了異步引入的方式。
定義路由
// ...
// 系統管理
{
path: '/system',
component: Main,
name: '系統管理',
redirect: '/system/organization',
children: [{
path: '/system/organization',
component: () => import ('@/views/System/Organization.vue'),
name: '組織結構',
// requiresAuth 用于確認此地址是否需要驗證
// alias 用于獲取后端返回rbac權限對應的前端路由地址和導航菜單圖標
meta: {requiresAuth: true, alias: 'Pmsadmin/Oragnize/list'}
},
{
path: '/system/user',
component: () => import ('@/views/System/User.vue'),
name: '人員管理',
redirect: '/system/user/index',
children: [
{
path: '/system/user/index',
component: () => import ('@/views/System/UserList.vue'),
name: '職員列表',
meta: {requiresAuth: true, alias: 'Pmsadmin/Admin/list'}
}
]
},
{
path: '/system/auth',
component: () => import ('@/views/System/Auth.vue'),
name: '角色管理',
meta: {requiresAuth: true, alias: 'Pmsadmin/Role/list'}
}
]
}
// ...
路由鉤子 beforeEach
router.beforeEach((to, from, next) => {
document.title = `${configs.title} - ${to.name}`;
const {hasAuth, auth} = store.state.user;
// 未拿到權限，則獲取
if (!hasAuth) {
store.dispatch('getUserAuth');
console.log('重新獲取用戶權限');
// next();
}
// 如果未登錄，跳轉
if (window.localStorage.getItem('IS_LOGIN') === null && to.path !== '/login') {
console.log('未登錄狀態');
next({
path: '/login',
query: {redirect: to.fullPath}
// 將跳轉的路由path作為參數，登錄成功后跳轉到該路由
})
} else {
// 需要鑒權的路由地址
console.log(to, auth.indexOf(to.meta.alias), auth);
if (to.meta.requiresAuth) {
if (auth.indexOf(to.meta.alias) > -1) {
console.log('有權限進入');
next();
} else {
if(auth.length > 0) {
Message.error({
message: '當前用戶權限不足，無法訪問',
showClose: true,
});
} else {
next();
}
}
} else {
next();
}
}
});
在 Vuex 的 state 中，定義好 nav 對象
// 登錄用戶信息
const user = {
name: '', // 用戶名
avatar: '', // 用戶頭像
auth: [], // 用戶權限
hasAuth: false // 是否已經加載用戶權限
};
// 導航菜單
const nav = [];
通過 action 異步獲取數據
// 獲取用戶權限
const getUserAuth = async ({commit}) => {
const res = await http.post('YOUR_URL', {});
if (res === null) return;
console.log('getUserAuth', res.param);
commit('SET_USER_AUTH', res.param.auth);
commit('SET_SIDE_NAV', res.param.nav);
};
Vuex 中的 mutation 的相關代碼
// 設置用戶權限
const SET_USER_AUTH = (state, auth) => {
state.user.auth = auth.concat('歡迎使用');
state.user.hasAuth = true;
};
// 設置導航菜單
const SET_SIDE_NAV = (state, nav) => {
// 導航菜單
let _nav = [{
name: '歡迎使用',
url: "/main",
iconCls: 'fa fa-bookmark'
}];
// 權限菜單對應的路由地址
const route = {
"系統管理": {iconCls: 'fa fa-archive', url: ''},
"Pmsadmin/Oragnize/list": {iconCls: '', url: '/system/organization'},
"Pmsadmin/Admin/list": {iconCls: '', url: '/system/user/index'},
"Pmsadmin/Role/list": {iconCls: '', url: '/system/auth'},
"Pmsadmin/Log/record": {iconCls: '', url: '/system/logs'},
"項目管理": {iconCls: 'fa fa-unlock-alt', url: ''},
"Pmsadmin/Project/list": {iconCls: '', url: '/project/list/index'},
"Pmsadmin/House/list": {iconCls: '', url: '/project/house'},
"Pmsadmin/Pack/list": {iconCls: '', url: '/project/pack'},
"廣告位": {iconCls: 'fa fa-edit', url: ''},
"Pmsadmin/Place/list": {iconCls: '', url: '/adsplace/list'},
"投訴建議": {iconCls: 'fa fa-tasks', url: ''},
"Pmsadmin/Scategory/list": {iconCls: '', url: '/complain/type'},
"Pmsadmin/Complain/list": {iconCls: '', url: '/complain/list'},
"Pmsadmin/Suggest/list": {iconCls: '', url: '/complain/suggestion'},
"報事報修": {iconCls: 'fa fa-user', url: ''},
"Pmsadmin/Rcategory/list": {iconCls: '', url: '/rcategory/type'},
"Pmsadmin/Rcategory/info": {iconCls: '', url: '/rcategory/public'},
"Pmsadmin/Repair/list": {iconCls: '', url: '/rcategory/personal'},
"便民服務": {iconCls: 'fa fa-external-link', url: ''},
"Pmsadmin/Bcategory/list": {iconCls: '', url: '/bcategory/type'},
"Pmsadmin/Service/list": {iconCls: '', url: '/bcategory/list'},
"首座推薦": {iconCls: 'fa fa-file-text', url: ''},
"Pmsadmin/stcategory/list": {iconCls: '', url: '/stcategory/type'},
"Pmsadmin/Store/list": {iconCls: '', url: '/stcategory/list'},
"招商租賃": {iconCls: 'fa fa-leaf', url: ''},
"Pmsadmin/Bussiness/list": {iconCls: '', url: '/bussiness/list'},
"Pmsadmin/Company/list": {iconCls: '', url: '/bussiness/company'},
"Pmsadmin/Question/list": {iconCls: '', url: '/bussiness/question'},
"停車找車": {iconCls: 'fa fa-ra', url: ''},
"Pmsadmin/Cplace/list": {iconCls: '', url: '/cplace/cmanage'},
"Pmsadmin/Clist/list": {iconCls: '', url: '/cplace/clist'},
"Pmsadmin/Cquestion/list": {iconCls: '', url: '/cplace/cquestion'},
};
for (let key in nav) {
let item = nav[key];
let _temp = {};
let subItems = []; // 二級菜單臨時數組
if (item.children && item.children.length > 0) {
// 二級菜單
item.children.forEach(subItem => {
subItems.push(Object.assign({}, {
name: subItem.name || '',
url: route[subItem.url].url || '',
iconCls: route[subItem.url].iconCls || '',
}))
});
// 一級菜單
_temp = Object.assign({}, {
name: item.name || '',
url: item.url || '',
iconCls: route[item.name].iconCls || '',
children: subItems.slice(0)
});
_nav.push(_temp);
}
}
state.nav = _nav;
};
3. 后端接口返回內容
{
"status": 200,
"info": "數據查詢成功！",
"param": {
"nav": {
"1": {
"name": "系統管理",
"url": "",
"children": [
{
"name": "組織結構",
"url": "Pmsadmin/Oragnize/list"
},
{
"name": "人員管理",
"url": "Pmsadmin/Admin/list"
},
{
"name": "角色管理",
"url": "Pmsadmin/Role/list"
},
{
"name": "日志管理",
"url": "Pmsadmin/Log/record"
}
]
},
"61": {
"name": "廣告位",
"url": "",
"children": [
{
"name": "廣告位列表",
"url": "Pmsadmin/Place/list"
}
]
}
},
"auth": [
"系統管理",
"Pmsadmin/Oragnize/list",
"Pmsadmin/Admin/list",
"Pmsadmin/Role/list",
"Pmsadmin/Log/record",
"廣告位",
"Pmsadmin/Place/list"
]
}
}
存在的問題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
