@mci-fe/user-auth

介绍

• 用户信息和权限管理模块

• 注意：当前只是支持对接 kc

使用

1. 在相应的子应用安装 @mci/user-auth 包

$ pnpm add @mci/user-auth --workspace

2. 使用 initUserAuth(dataSource, accessConfig) 进行初始化

视需要接入的子应用的类型不同，初始化方式也不同。不同之处在于，对于独立子应用而言，它在初始化传入的第一个参数 dataSource 是 systemCode，而对于微前端子应用来说，它的 dataSource 则是主应用已经请求过的拿回来的用户信息和权限信息。

第二个参数 accessConfig 是可选的，它是用配置文件 access.ts 导入的（该文件约定俗成存放在 /src/config/access.ts 这个路径之下）。主要是用于 button 级别的权限配置场景。简单的样例如下：

import { AccessConfig } from '@mci/user-auth';

export default {
  canViewTestMenu: (roleList, authCodeList) => {
    return authCodeList.map((_) => _.authCode).includes('1020001005');
  },
} satisfies AccessConfig;

2.1 独立子应用接入

import accessConfig from '@/config/access';

const { UserAuthProvider } = await initUserAuth('1020', accessConfig);

在这里，1020 就是 systemCode。

2.2 微前端子应用接入

 import accessConfig from '@/config/access';

async function render(props: MicroAppProps) {
  const { container, routerBase = '/', userInfo, authInfo } = props;
  // ......

  const { UserAuthProvider } = await initUserAuth(
    {
      user: userInfo,
      auth: authInfo,
    },
    accessConfig,
  );
}

3. 把 <UserAuthProvider> 挂在到 UI 组件树的顶部

root.render(
  <React.StrictMode>
    // ...
    <UserAuthProvider>
      <App />
    </UserAuthProvider>
    // ...
  </React.StrictMode>,
);

4. 消费权限相关的 API

4.1 对路由进行鉴权 - authForRoute()

首先, 要对 /src/config/menu.tsx 进行配置。menu 配置是一个树状结构的数据，你可以在每一个需要权限控制的节点上增加一个字段：authCode。该字段的值是一个数组，用于表达，只要当前用户拥有该数组上的任何一个 authCode ，他/她就有权限查看当前的路由页面。配置示例：

const routeMap: ProLayoutProps['route'] = {
  path: '/',
  name: '挂牌管理',
  component: <Welcome />,
  routes: [
    {
      path: 'subject-authentication',
      name: '申请主体认证',
      icon: <SmileFilled />,
      component: <DroListed />,
      authCode: ['1020001004'],
    },
  ],
  authCode: ['1020001001'],
};

然后，在渲染之前，用 authForRoute() 对 routeMap 进行包裹：

<ProConfigProvider hashed={false}>
  // ...
  {generatePath2RouteComponentMap(authForRoute(defaultProps.route)).map(([path, component]) => (
    <Route
      key={path}
      index={path === '/'}
      path={path}
      element={<Suspense fallback={'loading'}>{component}</Suspense>}
    />
  ))}
  // ...
</ProConfigProvider>

4.2 在非菜单/路由的更细颗粒度的地方进行鉴权

import { useAccess, Access } from '@mci/user-auth';

function Test() {
  const access = useAccess();

  return (
    <Access accessible={access.canViewSomePage}>
      <button
        onClick={() => {
          if (!access.canClickTestButton) {
            alert('Oops, 你没有权限点击该按钮');
          }
        }}>
        测试
      </button>
    </Access>
  );
}