登录流程与动态菜单

在 src/app.tsx 里面有这么几行代码：

```javascript
if (!initialState?.currentUser && location.pathname !== loginPath) {
    history.push(loginPath);
}
```

这几行代码是校验登录的，如果当前用户不存在，且不是登录页面，则跳转登录页面。
在登录页面，有这么几行代码：

```javascript
/** 此方法会跳转到 redirect 参数所在的位置 */
const goto = () => {
  if (!history) return;
  setTimeout(() => {
    const { query } = history.location;
    const { redirect } = query as { redirect: string };
    history.push(redirect || '/');
  }, 10);
};

// 登录
const msg = await login({ ...values, type });
if (msg.status === 'ok') {
  const defaultloginSuccessMessage = intl.formatMessage({
    id: 'pages.login.success',
    defaultMessage: '登录成功！',
  });
  message.success(defaultloginSuccessMessage);
  await fetchUserInfo();
  goto();
  return;
}
```

其实就是先调用登录接口，然后提示登录成功，接着获取用户信息，即 fetchUserInfo，然后页面跳转，我是个新手，对这个 goto 里面的 setTimeout 不是很清楚其用意，但是删除 setTimeout 则 app.tsx 里拿不到用户信息，然后继续跳转登录，我们看看 fetchUserInfo 吧

```javascript
const fetchUserInfo = async () => {
  const userInfo = await initialState?.fetchUserInfo?.();
  if (userInfo) {
    setInitialState({
      ...initialState,
      currentUser: userInfo,
    });
  }
}
```

我严重怀疑这里的 setInitialState 是个异步的方法，不会立马成功，所以才需要 setTimeout 等待其结束，不过暂时还没验证。

`await initialState?.fetchUserInfo?.();`  这行最终调用 app.tsx 里面的 `fetchUserInfo` 源码如下：

```
const fetchUserInfo = async () => {
  try {
    const result = await queryCurrentUser();
    const currentUser = result.data
    return currentUser;
  } catch (error) {
    history.push(loginPath);
  }
  return undefined;
};
```

这里的 queryCurrentUser 其实是 src/services/ant-design-pro/api.ts 里的 `currentUser` 方法，这个方法返回当前用户信息，其中最重要的字段是：`access` 它的用途主要体现在 src/access.tsx 里面，源码如下：

```
export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}
```

这里返回了 canAdmin 字段，这个字段代表了当前用户是不是 admin，而是不是 admin 是通过 access 字段确定的。这个 canAdmin 可用于菜单，比如，我的 config/config.ts 里有如下一段：

```
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [
  {
    name: 'form-builder',
    icon: 'smile',
    access: 'canAdmin',
    path: '/dashboard/form-builder',
    component: './dashboard/form-builder',
  },
```

这里，我用到了 `access: 'canAdmin',` 如果前面获取用户信息接口返回的 access 不是 admin，则当前登录用户看不到这个菜单，如果输入 url 去访问，会提示 403 没权限。

如果想要修改登录流程，其实就是修改两个接口，如果需要动态菜单，可以通过获取用户信息接口返回的 access 字段控制，也可以自己定制 access.ts 来实现，关于 access 的更多文章可参考：[https://umijs.org/zh-CN/plugins/plugin-access](https://umijs.org/zh-CN/plugins/plugin-access)