因为项目需求将权限的判断防止前台，而antd-pro最近刚改了权限相关的配置，这里再次进行一个简单实现讲解。
功能：通过登陆用户的权限，展示特定的侧边栏内容，并且通过url直接访问非权限页面时候抛出403；另外存在跳出BasicLayout的功能。
- config/router.config.js
// 新增页面a，design tool， 跳转的页面必须写在之前，否则即便权限正确也会提示403，因时间关系，未详细查询原因
{
path: '/design/tools',
name: '设计工具页面',
authority: 'design', // 设置访问本页面的权限
Routes: ['src/pages/Authorized'], // 调用权限检查工具
component: './design/designTools',
},
// 新增页面b，
{
path: '/design/tools',
name: '设计工具页面',
authority: ['design', 'admin'] // 设置访问本页面的权限
Routes: ['src/pages/Authorized'], // 调用权限检查工具
component: './layouts/NormalLayout',
routes:[{
{ path: '/furnitures', redirect: '/furnitures/list' },
{
path: '/furnitures/list',
name: '商品列表',
component: './furnitures/list',
}
}]
},
//all
{
path: '/',
component: '../layouts/BasicLayout',
Routes: ['src/pages/Authorized'],
... ...
}
可根据需求采用a、b两种引入页面的方式，b方式相当于将新增的页面统一嵌套在自定义的NormalLayout模板中；
- PS
- 因为跳转页面是在缓存中处理的，我们更换账号登陆后，还是会默认跳回之前退出的页面，如果登陆默认跳转到固定页面：
- src/models/login.js
*login({ payload }, { call, put }) {
... ...
// 关掉重定向的逻辑处理，并修改跳转代码
// let { redirect } = params;
// if (redirect) {
// const redirectUrlParams = new URL(redirect);
// if (redirectUrlParams.origin === urlParams.origin) {
// redirect = redirect.substr(urlParams.origin.length);
// if (redirect.match(/^\/.*#/)) {
// redirect = redirect.substr(redirect.indexOf('#') + 1);
// }
// } else {
// window.location.href = redirect;
// return;
// }
// }
// yield put(routerRedux.replace(redirect || '/'));
yield put(routerRedux.replace('/'));
... ...
}
- 如果跳转到不同权限的某个页面， 除了处理下login.js中的代码外，还需要进行一下处理：
- src/models/menu.js
*getMenuData({ payload }, { put }) {
... ...
// 我设置的是默认跳转到权限下第一个页面
yield put(routerRedux.replace(menuData[0].path || '/'));
... ...
}
