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,
});
}
});
}