后台系统除了菜单权限的控制，还有按钮权限的控制，本文主要说按钮权限的控制。
Vue 和 React 后台系统的按钮权限，从方便性的角度，可以用不同的方式实现。
React 后台系统的权限按钮实现
对于 React 后台系统，权限按钮，其实就是封装一个按钮组件。权限的视线，主要通过 auth 属性，如果没有 auth 属性，那么该按钮就是普通的 Button 按钮。如果有 auth 属性，那么 auth 的值对应的就是按钮的权限码，看下用户的所有按钮权限码，如果包含则展示该按钮，否则返回 null
/**
* AuthButton
* @description 该组件用于权限按钮的展示主要通过是auth属性实现，
* 如果没有auth属性则跟普通按钮一样展示，如果有auth属性，那么根据用户拥有的按钮权限列表有没有该auth属性来展示或者隐藏按钮
* @param {string} auth - 权限标识
* @returns {React.FunctionComponent}
* @example
* import AuthButton from '@/components/AuthButton'
* <AuthButton>查看</AuthButton> 这个按钮不受权限控制,就是一个Button
* <AuthButton auth="user@add">添加用户</AuthButton> 这个按钮需要用户拥有user@add权限才能看到
*/
import { Button } from "antd"
import React from "react"
type AuthButtonProps = {
auth?: string
[key: string]: any
}
const AuthButton: React.FC<AuthButtonProps> = ({auth,...otherProps}) => {
if(!auth) return <Button {...otherProps}/>
// 获取用户按钮权限列表
const { buttonList } = /** 写上按钮权限列表的来源 */;
if(buttonList.includes(auth)){
console.log('buttonList',buttonList)
return <Button {...otherProps}/>
}
return null
}
AuthButton.displayName = "AuthButton"
export default AuthButton
Vue 后台系统的权限按钮实现
对于 Vue 后台系统，权限按钮，其实也可以封装一个按钮组件，但更方便的是指令，v-auth 指令，如果没有这个指令，自然就是普通按钮，如果有这个指令，那么指令值依旧是权限码，看下用户的所有按钮权限码，如果包含则展示该按钮，否则隐藏并移除该按钮。
/**
* auth指令：
* 该指令用于权限按钮的展示主要通过是auth属性实现，
* 如果没有auth属性则跟普通按钮一样展示，如果有auth属性，那么根据用户拥有的按钮权限列表有没有该auth属性来展示或者隐藏按钮
* 使用方式：<button v-auth="user@add">添加用户</button> 这个按钮需要用户拥有‘user@add’权限才能看到
* 全局注册方式：Vue.directive('auth',auth)
*/
app.directive('auth',{
beforeMount:function(el,binding){
const buttonList = /** 写上按钮权限列表的来源 */;
const value = binding.value;
const hasPermission = buttonList.includes(value)
if(!hasPermission){
// 没有权限则隐藏然后移除按钮
el.style ='display:none';
setTimeout(()=>{
el.parentNode.removeChild(el)
},0)
}
}
})
