Protecting application routes based on user roles

In this section, we'll configure the Umi plugin-access plugin to define user permissions and protect routes and features from unauthorized access.

To configure the access plugin, we must create an access.ts file in the src folder. The access.ts file must export a function that returns an object, and each property of that object must be a Boolean value representing permissions. Consider the following example:

export default function (initialState: any) {
  const { access } = initialState;
  return {
    readOnly: access == 'basic',
  };
}

In this example, we read the access property from the initial state and returned the readOnly: true permission if access is equal to basic.

Let's create an access.ts file for our application.

Create a new file called access.ts in the src folder and create the default function as follows:

import { GlobalState } from...