记录一下第一次独立完成antpro搭建的react项目中的权限管理

antProg官网中的权限参考

1. 我的路由 router.ts

export default [
  {
    path: '/',
  },
  {
    path: '/Statistics',
    layout: false,
    component: './Statistics',
  },
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user',
        routes: [
          {
            name: '登录',
            path: '/user/login',
            component: './user/Login',
          },
          {
            name: '重置密码',
            path: '/user/reset-password',
            component: './user/ResetPassWord',
          },
        ],
      },
    ],
  },
  {
    path: '/passenger',
    icon: 'CarOutlined',
    name: '客运检查系统',
    routes: [
      {
        path: '/passenger/check-in',
        component: './Checkin',
        name: '进场确认记录',
        admin: 'admin.check.carin',
        access: 'adminRouteFilter',
      },
      {
        path: '/passenger/anti-epidemic',
        component: './AntiEpidemic',
        name: '防疫消毒记录',
        admin: 'admin.check.antie',
        access: 'adminRouteFilter',
      },
      {
        path: '/passenger/security-check',
        component: './SecurityCheck',
        name: '安全例行检查',
        admin: 'admin.check.safecheck',
        access: 'adminRouteFilter',
      },
      {
        path: '/passenger/check-out',
        component: './CheckOut',
        name: '出场检查记录',
        admin: 'admin.check.carout',
        access: 'adminRouteFilter',
      },
      {
        path: '/passenger/check-out-detail/:id',
        component: './CheckOut/detail',
        name: '出场检查详情',
        hideInMenu: true,
        admin: 'admin.check.carout',
        access: 'adminRouteFilter',
        parentKeys: ['/passenger/check-out'],
      },
    ],
  },
  {
    path: '/settings',
    icon: 'SettingOutlined',
    name: '系统设置',
    routes: [
      {
        path: '/settings/userManagement',
        component: './UserManagement',
        name: '用户管理',
        admin: 'admin.system.user',
        access: 'adminRouteFilter',
      },
    ],
  },
  {
    path: '/403',
    component: './403',
  },
  { component: './404' },
];

2. 参考官网步骤我们在src/access.ts进行我们的权限判断

/**
 * @see https://umijs.org/zh-CN/plugins/plugin-access
 * */

// initialState包含 settings currentUser fetchUserInfo 其中currentUser包含用户的信息具体包含哪些看你们和后端如何定义，往下看
export default function isAdminaccess(initialState: any) {
  const { currentUser } = initialState || {};
  return {
  	// route包含所有的路由信息也就是第一步中的router.ts
  	// adminRouteFilter是我们自己取的方法名字和router.ts中的access中对应,也就是说在router.ts中的路由只要加上了access字段并且值为adminRouteFilter就会执行这个函数并且这个函数返回true时我们才能访问，否则403
    adminRouteFilter: (route: any) => {
      return currentUser?.hasRoutes?.includes(route.admin);
    },
  };
}

// 接下来看app.ts
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: CurrentUser;
  fetchUserInfo?: () => Promise<CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
     // 获取用户信息接口
      const res = await userInfoUsingGET();
      if (res.code !== 0) {
        message.error(res.message);
      }
      // menuList就包含用户的权限格式如下:
      // ["admin.system.user", "admin.check.safecheck", "admin.check.antie", "admin.check.carin", "admin.check.carout"]也就是在router.ts中admin对应的字段
      return {
        hasRoutes: res.data.menuList as string[],
        access: 'admin',
        name: res.data.uniqueName,
        needFilter: res.data.needFilter,
        avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      };
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };
  // 如果是登录页面，不执行
  if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: {},
    };
  }
  return {
    fetchUserInfo,
    settings: {},
  };
}

以上仅供参考, 业务不同可能实现方法也不一样。