UmiJS 中 @umijs/plugin-access 和 @umijs/plugin-layout 的使用问题

发表于 更新于 Disqus： 本文字数： 875 阅读时长 ≈ 1 分钟

UmiJS 中 @umijs/plugin-access 和 @umijs/plugin-layout 的使用问题

示例代码：

1
2
3
4
5
6
7
8
9
10
// src/access.ts
export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  const isLogin = !!currentUser;
  // const isLogin = !!currentUser || undefined;
  return {
    isLogin,
  };
}

注意（有坑）：

@umijs/plugin-access 插件通过 patchRoutes 处理了 props.routes （完整的路由），
@umijs/plugin-layout 插件判断权限时，读取的是 props.route.routes （当前路由），
而此时 props.routes 与 props.route.routes 的 unaccessible 值并不一致（后者为旧值）。

影响：

通常首次访问时，currentUser 是 undefined，则 isLogin = false，因为上述问题，
直接导致在登录页 setInitialState 之后，currentUser 已经有值，isLogin = true 的情况下，
@umijs/plugin-layout 插件读取到的路由数据是旧数据，
即 props.route.routes 中的 unaccessible = true，
而 props.routes 中的 unaccessible = false （因为权限已经有了）

临时解决方案：

经测试发现，如果首次加载的时候，将权限的值设为 undefined 而不是 false，
那么 setInitialState 之后，props.route.routes 中的 unaccessible = false，而不是 true。