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'},
