antdesignpro 权限_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,

});

}

});

}