Think of button permission controls in terms of architecture

Analyze all requirements

In fact, button control is still very simple, and there are many solutions on the Internet, I am mainly here to share a process of their own implementation

I mainly divided into

  • Sign up button
  • Menu control button
  • Role Control Control menu already has buttons
  • The route compares the current page button KEY to achieve control

1.1 Registration Button

So what I’m doing here is I’m configuring the button in the dictionary table with the name of the button and the KEY of the button

  • Scenario 1: We use components to register buttons and buttons in the page
<! -- Auth specifies the name of the KEY to be added in the configuration table.
<BtnAuth auth="UPDATE_BUTTON">
   <el-button size="mini" type="primary">The editor</el-button>
</BtnAuth>
Copy the code
  • Option 2: Register all the buttons in the configuration table as components
/ * * * my train of thought was through a component container package all button * pages need to pass in a corresponding key components and the method of the button calls * do this name can be unified control can be through the dictionary to change * because time reason did not take this solution Main is afraid of problems Because have launched * /
<BtnAuth auth="UPDATE_BUTTON" v-on={xxxxx}>
</BtnAuth>
Copy the code

1.2 Menu Control buttons

There’s nothing to say about that

1.3 Role Control There are buttons on the control menu

xxxx

1.4 Route Comparison Buttons on the current page are used for control

That’s the core of this step and that’s where most of the logic is implemented

<script>
import { usePermission } from '@/hooks/usePermission'
const isTextMatch = false // Whether to use text matching
export default {
  name: 'BtnAuth'.props: {
    auth: {
      type: String | Array.default: () = >[]}},render() {
    const slot = this.$slots? .default ||null
    const { hasPermission } = usePermission()
    if(! slot)return null
    constbtnText = slot? .componentOptions?.children[0]? .textlet authdef = null
    if(btnText && isTextMatch) {authDef = {add:'INSERT_BUTTON'Editor:'UPDATE_BUTTON'Delete:'DELETE_BUTTON'To review:'AUDIT_BUTTON'
      }[btnText]
    }
    return hasPermission(authdef || this.auth) ? slot : null
  }
}
</script>
Copy the code