ant design pro 权限控制

ant design pro对页面router 的权限通过authority来控制，如下：

{
        name: 'account',
        icon: 'setting',
        path: '/account',
        authority: ['admin'],
        routes: [
          {
            path: '/account/operation',
            name: 'operation',
            component: './Account/Operation/UserOperation',
          },
        ],
      },

具体实现包括以下几个模块：
1、在utils下的Authorized.js文件中，通过调用getAuthority()来获取当前用户的权限，并定义了重新加载权限的方法reloadAuthorized()。
2、在utils下的authority.js文件中，定义了getAuthority()和setAuthority()方法，分别表示获取当前用户权限和设置当前用户权限。
如果想要通过自配置数据库来获取用户权限，可以采用如下方式：
1、在service下定义获取用户权限接口

export async function queryRole() {
  return request(`http://*****/user/role`);
}

2、在model中设置用户权限

import {
  queryRole
} from '@/services/user';
import { setAuthority } from '@/utils/authority';
import { reloadAuthorized } from '@/utils/Authorized';


export default {
  namespace: 'user',

  state: {
    result: null,
  },

  effects: {
    *fetchRole({ payload }, { call, put }) {
      const response = yield call(queryRole, payload);
      yield put({
        type: 'saveRole',
        payload: response,
      });
    },
  },

  reducers: {
    saveRole(state, action) {
      setAuthority(action.payload.role);
      reloadAuthorized();
      return {
        ...state,
        result: action.payload,
      };
    },
  },
};

3、在layout下的BasicLayout.js文件中，调用fetchRole方法

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/fetchRole',
    });
    dispatch({
      type: 'setting/getSetting',
    });
    this.renderRef = requestAnimationFrame(() => {
      this.setState({
        rendering: false,
      });
    });
    this.enquireHandler = enquireScreen(mobile => {
      const { isMobile } = this.state;
      if (isMobile !== mobile) {
        this.setState({
          isMobile: mobile,
        });
      }
    });
  }