vue项目文件的权限配置
vue项⽬⽂件的权限配置1、⾸先，在项⽬⽬录下的main.js⾥写⼊权限添加的主函数
1.在项⽬⽬录下的server⽂件夹下的server.js⽂件中，写⼊接⼝函数
// ⽤户权限
export function get_permission(params) {
('/user/getPermList', {
params
});
}
2.登录页⾯login.vue中，写⼊调接⼝函数
// 权限
getPermission() {
/
/ let that = this;
const obj = {
appCode: 1003  // 不同项⽬appCode不通，是后端⼈员配置的
};
get_permission(obj)    // 接⼝函数写在⽅法⾥，不要直接写在mounted初始化函数⾥
.then(res => {
if (de === "90000") {
let permissionInitList = sult; // 获取接⼝⾥的权限数据
if (permissionInitList != null) {
sessionStorage.setItem(
"permissionList",
JSON.stringify(permissionInitList)  // ⽤局部缓存保存起来
);
}
}
})
.catch(function(error) {
15万左右性价比高的车console.log(error);
});
}
3.main.js⽂件⾥写⼊主⽅法
// 权限函数
土木实习报告
Vue.prototype.hasPermission = function (userPermission = '') {
let permissionList = Item('permissionList') || [];  // 获取缓存的权限列表
if (permissionList.length !== 0) {
permissionList = JSON.parse(permissionList);
}
let userName = Item('userName');
if (userName === "administrator") {  // 如果是管理员则不做权限操作，否则为普通⽤户设置权限
return true;
} else {
return permissionList.includes(userPermission) || false;  // 返回是否包含参数权限
}
}
2、然后，在需要的⽂件中写⼊main.js中的⽅法，配置权限何秀琼
平安夜的祝福语1.为菜单栏添加权限，在项⽬⽬录下的data⽂件⾥的menu.js中
export const menu = [
{
做梦梦见鬼
icon: 'fa fa-dashboard',
index: 'team-show1',
title: '平台管理',
permission: '/oes-workbench-manage/workbench-menu',
subs: [
{
index: 'team-show',
title: '⼯作组总览',
permission: '/oes-workbench-manage/workbench-overview-menu'
},
{
index: 'team-manage',
title: '⼯作组管理',
permission: '/oes-workbench-manage/workbench-groupmanage-menu'
}
伊犁美食
]
}
...(需要的菜单添加权限permission)
]
3.给项⽬⽂件添加权限，在<button>按钮或者<div>元素上添加v-if = hasPermission(args)⽅法
//在需要的⽂件⾥添加⽅法，如此项⽬⽂件notice-manage.vue中
<el-button
type="primary"
@click="deletePatchButton"
:disabled="deleteBtn"
icon="el-icon-delete"
v-if="hasPermission('/oes-workbench-manage/notice/del')"  // 参数为上述后端给的表格⾥的路径
>批量删除</el-button>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。