RTK查询运行两次而不是一次

Question

这是一个authorizaton中间件组件，它使用Redux将App组件封装在一个React应用程序中。授权是使用access_token cookie完成的。还有一个带有logged_in的httponly=false cookie，以便客户端知道它的登录情况，还有一个refresh_token cookie。

逻辑是：

• 1. 检查是否有logged_in cookie，如果没有，请完成

• 1. 向GetWhoAmI api端点发送请求

- `GetWhoAmI` success: finish

• 1. GetWhoAmI失败:尝试使用RefreshToken端点刷新access_token

- `RefreshToken` fail: delete the `logged_in` cookie and finish

• 1. RefreshToken成功:再次尝试GetWhoAmI端点

- `GetWhoAmI` success: finish
- `GetWhoAmI` fail: remove `logged_in` cookie and finish

我不喜欢这种状态机方法，但我已经尝试了所有其他方法，并且一直有奇怪的循环，或者根本没有运行的查询。

export const AuthMiddleware: React.FC<{ children: React.ReactElement }> = 
    ({ children }) => {
  const [state, setState] = useState(1);
  const [cookie, , removeCookie] = useCookies(["logged_in"]);
  const hasLoggedInCookie = cookie.logged_in === "true";

  const { isSuccess: whoAmISuccess, isError: whoAmIError } = 
    useGetWhoAmIQuery(undefined, { skip: state !== 2 && state !== 4 });
  const { isSuccess: refreshSuccess, isError: refreshError } = 
    useRefreshTokenQuery(undefined, { skip: state !== 3 });

  if (state === 1) {
    setState(hasLoggedInCookie ? 2 : 0);
  }
  if (state === 2 && whoAmIError) setState(3);
  if (state === 2 && whoAmISuccess) setState(0);
  if (state === 4 && whoAmISuccess) setState(0);
  if (state === 4 && whoAmIError) {
    removeCookie("logged_in");
    setState(0);
  }
  if (state === 3 && refreshError) {
    removeCookie("logged_in");
    setState(0);
  }
  if (state === 3 && refreshSuccess) {
    setState(4);
  }

  console.log(state);
  if (state !== 0) {
    return <FullScreenLoader />;
  }
  return children;
};

就功能而言，这是可行的，但是有两个奇怪的问题：

1. 当到达需要调用RefreshToken端点的点时，将连续查询端点两次。

​

1. 如果我记录这个状态，它看起来像是某个时候状态向后，例如3-2-3或4-3-4，尽管从代码来看，状态不可能从4转到3，或者从3到2。

很明显，我在这里做错了什么，但经过两天的努力，我无法解决这个问题。

Answer 1

在RTK查询中的文档中有一种刷新令牌方法，而不是在组件中--您试过吗？

基于扩展fetchBaseQuery的自动重授权

您的代码可以归结为一个useGetWhoAmIQuery()调用。

此外，类似令牌刷新(如果您在这里选择此方法)应该始终是一个突变，而不是一个查询。然后，它也可以使getWhoAmIQuery失效，并且它可以自动重新获取--不需要您编排它！