前端界面权限控制-React/Vue实现
前言
在所有管理系统中，都会包含权限模块，来进行用户的权限分配和控制，从而达到操作和数据隔离。
权限管理主要以后台权限控制为主，加上前台界面显示来进行不同级别的权限控制管理。
通常在前端的权限控制设计中，按照不同细粒度进行划分为三类：
- 页面级别
- 模块级别
- 按钮级别
在应用React/Vue的前端框架界面中，这三类基本都是通过组件来进行权限控制，所以本文主要针对组件的扩展来实现。
实现
以前端界面的用户模块权限控制为例，通过不同权限来显示可操作的组件，达到操作控制效果。
前端要加入权限控制的话，要确保新模块对原系统的侵入性很小，尽量在不改动原系统框架的基础上进行扩展。
首先在用户登录后，后台会返回相应的权限集合，然后进行界面控制。
权限组集合:
// 权限集合
let auths = [
{id: 100, auth: 'admin_user', name: '用户模块'},
{id: 101, auth: 'admin_user_get', name: '查看用户'},
{id: 102, auth: 'admin_user_add', name: '添加用户'},
{id: 103, auth: 'admin_user_del', name: '删除用户'},
{id: 104, auth: 'admin_user_edit', name: '编辑用户'},
]
接下来将从react和vue两个框架分别实现权限控制
React实现
在react框架中，采用的是React高阶组件来实现权限控制。在不改动原有组件的情况下，对现有组件进行权限属性扩展。
通过高阶组件包装现有组件，进行权限组件验权，如果组件无需权限控制或权限匹配，则默认不做处理，直接显示原组件。如果组件权限校验失败，则显示空内容。[注意:使用高阶组件包装，如果原组件用到静态方法和ref属性，需要特殊处理，请参考React高阶组件说明]
验权实现:
// 组件验权
function checkAuth(auth) {
// 用户权限表
const rules = auths;
for (let i = 0; i < rules.length; i++) {
const item = rules[i]
// 无需权限控制或者权限匹配则通过
if(!auth || (auth == item.auth)){
return true
}
}
return false
}
// 高阶组件包装原组件
function warpAuth(WrappedComponent) {
let New = class extends React.Component {
constructor(props) {
super(props)
}
render () {
if (checkAuth(this.props.auth)) {
return 实例应用:
let Button = wrapAuth(Button)
class Page extends React.Component {
constructor(props) {
super(props)
}
render () {
return (
)
}
}
Vue实现
在vue框架中，采用的是Vue自定义指令来实现权限控制。在不改动原有组件的情况下，对现有组件统一进行权限指令扩展。
通过自定义权限指令，进行权限组件验权，如果组件无需权限控制或权限匹配，则默认不做处理，直接显示原组件。如果组件权限校验失败，则移除该组件。[注意:添加自定义指令，全部组件包括第三方组件库都会生效]
验权实现:
// 需要在入口处添加自定义权限指令v-auth，显示可操作组件
Vue.directive('auth', {
bind: function (el, binding, vnode) {
// 用户权限表
const rules = auths
for (let i = 0; i < rules.length; i++) {
const item = rules[i]
if(!binding.value || (binding.value == item.auth)){
// 权限允许则显示组件
return true
}
}
// 移除组件
el.parentNode.removeChild(el)
}
})
实例应用:
总结
可能有人会说，如果只通过简单检测是否有权限，那万一有人进行非法权限注入，前端界面就会显示本该无权限的操作组件。针对这个问题的疑虑，我想说任何前端的权限控制、加密、设防等技术都存在缺陷，因为暴漏在外的程序被破解的风险很高，还是那句话，后台对前台发出的请求都不应该直接信任，任何包含权限的操作都需要在后台进行拦截和过滤，识别用户的权限再进行处理。
好了，关于前端的权限控制就写到这，有任何疑问和错误随时留言，感谢支持