一般业务逻辑是,后端通过登录用户,返回对应的角色或者权限
前端根据后端返回的东西再做权限处理
常规有以下几种处理方式
-
验证用户是否具备某权限
-
验证用户是否含有指定权限,只需包含其中一个
-
验证用户是否含有指定权限,必须全部拥有
-
验证用户是否具备某角色
-
验证用户是否含有指定角色,只需包含其中一个
-
验证用户是否含有指定角色,必须全部拥有
参考以下的若依代码
function authPermission(permission) {
const all_permission = "*:*:*";
const permissions = [后端返回的权限列表]
if (permission && permission.length > 0) {
return permissions.some(v => {
return all_permission === v || v === permission
})
} else {
return false
}
}
function authRole(role) {
const super_admin = "admin";
const roles = [后端返回的角色列表]
if (role && role.length > 0) {
return roles.some(v => {
return super_admin === v || v === role
})
} else {
return false
}
}
export default {
// 验证用户是否具备某权限
hasPermi(permission) {
return authPermission(permission);
},
// 验证用户是否含有指定权限,只需包含其中一个
hasPermiOr(permissions) {
return permissions.some(item => {
return authPermission(item)
})
},
// 验证用户是否含有指定权限,必须全部拥有
hasPermiAnd(permissions) {
return permissions.every(item => {
return authPermission(item)
})
},
// 验证用户是否具备某角色
hasRole(role) {
return authRole(role);
},
// 验证用户是否含有指定角色,只需包含其中一个
hasRoleOr(roles) {
return roles.some(item => {
return authRole(item)
})
},
// 验证用户是否含有指定角色,必须全部拥有
hasRoleAnd(roles) {
return roles.every(item => {
return authRole(item)
})
}
}
其实本质上都是判断数组内是否存在某个角色或者某个权限,存在返回true,否则返回false
以上方法常用于函数处理中,而一般处理权限按钮,可以封装一个自定义指令,参考以下的若依代码
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = [后端返回的用户角色/权限]
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作权限标签值`)
}
}
}