antd-pro v2 关于前端配置权限相关

因为项目需求将权限的判断防止前台，而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模板中；

因为跳转页面是在缓存中处理的，我们更换账号登陆后，还是会默认跳回之前退出的页面，如果登陆默认跳转到固定页面：
- 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 || '/'));
        ... ...
    }

antd-pro v2 关于前端配置权限相关

推荐阅读更多精彩内容