background

This problem starts with the permission management of a background management system. We can divide the background permission management system into several levels, as follows:

• Account login, generally for the background is only after login account, can jump to the main page for a series of operations, all requests require header with accessToken, can normally obtain data or request interface success, no login, no permissions;
• Role management and background management The super administrator can set several roles and assign different permissions to each role.
• Function permissions: Configure the corresponding menu permissions and button permissions based on the role Settings. If the menu permissions are not available, the menu directory is not displayed at all. Even if the page that is not within the permission scope can be opened by other means, the back end verifies the permissions. The corresponding button authority is the smallest authority division, such as some pages can be viewed by part of the administrator, but only part of the administrator with authority to edit.

Solution:

The front end can obtain all the permissions of the user by calling the back-end interface, but the permissions buttons are scattered in the components at all levels of each page. If you want to control the display of the permissions buttons, you need to use the state manager for unified management. Introduce mobx and Mobx-React dependencies.

Mobx API includes three types: Observable defines observable data, Action modifies observable data, Autorun reacts to changes in observable data, and When combined with React, Use the Observer in Mox-React to wrap the render method of the component as Autorun.

More: cn.mobx.js.org/

Application:

1. Define an observable data store permission in store:

@observable data={
        menuPublishPermission:false.// Menu publish permission
        matterPublishPermission:false.// Issue publishing permission
        pushPermission:false.// Push permission. };Copy the code

2. Define an action that changes the data in the store:

/*action*/
    @action.bound saveData(data){
        let this_=this;
        data.forEach(function (el, index) {
            if (el.code === 404) {// Publish push related
                let arr=el.children;
                arr.forEach(function (e,i) {
                    switch (e.code) {
                        case 70001:this_.data.menuPublishPermission=e.ifme;break;
                        case 70002:this_.data.matterPublishPermission=e.ifme;break;
                        case 70003:this_.data.policyPublishPermission=e.ifme;break;
                        case 70004:this_.data.specialPublishPermission=e.ifme;break;
                        case 90001:this_.data.pushPermission=e.ifme;break; }})}... }); }Copy the code

Add an observer to the React component to update the render function when observable data changes.

@observer
class FormManage extends React.Component {... }Copy the code

Use the data in store to display the button and bind the event function when the right is limited. If there is no right, a button that cannot be clicked will be displayed as follows:

render(){
  return <div>
      {permissionStore.data.formPermission?
         <Button onClick={this.toAddMatter.bind(this)}>The new form</Button>
          :
         <Button disabled>The new form</Button>
        }
   </div>
 }
Copy the code