权限分为页面级别和按钮级别。

　　页面级别指的是，如果没有权限就无法访问整个页面，所以就要从菜单、路由守卫等方面下手。

　　从菜单方面，要根据权限来渲染菜单，路由方面呢，要通过路由守卫阻止用户访问无权限访问的页面。

　　按钮级别的权限，指的是页面中某些模块也依靠权限来进行控制，尤其是某些操作的按钮，这些往往又和角色相关，也就是说，在各大组件中，往往要依靠用户的角色来判断是否要对某些功能模块甚至某些按钮做特殊处理。

　　此时，我们发现根据数据来对功能模块组件或者dom进行操作的逻辑是可以复用的，那么在vue中我们就可以将这段逻辑封装成一个自定义指令，然后通过给对应的组件、dom绑定指令来实现逻辑的快速复用。

　　app.directive('authority', (el, binding) => { // mounted 和 updated的时候执行

　　const { arg } = binding

　　const { superadmin } = binding.modifiers

　　const { role, adminname } = store.state.authority

　　if (adminname !== 'admin' && superadmin && role !== 2) {

　　switch (arg) {

　　case 'remove':

　　el.remove()

　　break;

　　case 'disabled':

　　el.disabled = true

　　el.className += ' is-disabled '

　　break;

　　default:

　　break;

　　}

　　}

　　}

　　<el-button v-authority:disabled.superadmin >查看</el-button>
　　<el-button v-authority:remove.superadmin >查看</el-button>

　　在React中我们可以通过封装一个Authority组件来进行权限的控制

　　import { connect } from 'react-redux'

　　import React from 'react'

　　// children 是要通过权限控制的元素, 可能是按钮也可能是其他组件

　　// mode为操控模式, remove代表不渲染, disabled代表设置disabled属性

　　// judge为自定义控制判断逻辑, 默认是判断role是否大于1

　　const Authority = (props) => {

　　const {

　　children, role, mode = 'remove', judge = (r) => (r > 1),

　　} = props

　　if (mode === 'remove') return judge(role) ? children : null

　　if (mode === 'disabled') {

　　const item = React.cloneElement(children, { disabled: !judge(role) })

　　return item

　　}

　　return children

　　}

　　export default connect((state) => state.authority)(Authority)

　　role > 1}>

　　<Authority mode="disabled" judge={(role) => role > 1}>
  　　<Button type="link" onClick={() => handleCheck(record.proid)}>查看</Button>
　　</Authority>

上一篇

清除浮动是怎么回事？

下一篇

Oozie和Azkaban的区别