Reactjs React中useAuthenticator的authState在成功登录后仍保持未认证状态 需要强制刷新

我正在使用Amplify身份验证来处理身份验证.然而，在我做了Auth.signIn()和Auth.confirmSignIn()(为了让用户输入6位代码)之后，

从钩子useAuthenticator返回的authStatus的值是'unauthenticated'，而route的返回值仍然是'signIn'...

我只是在Auth.confirmSignIn()之后的Promise Resolve中拨打了window.location.reload()来"修复"这个问题，但它就是感觉不对……应该有更好的方式来通知Amplify我们已经成功登录.

问题是: 如何刷新身份验证状态以使useAuthenticator在我成功(自定义)登录时拾取？

代码(如果需要)-如下

登录组件的主要部分:

import { Amplify, Auth } from "aws-amplify";
import { CognitoUser } from "amazon-cognito-identity-js";
// other imports, component definition and local state...

const onSubmit = () => {
    Auth.signIn({
      username: state.username,
      password: state.password,
    })
      .then((response: CognitoUser) => {
        // if needed, do something custom with the response...
        // if we have a `customChallenge`
        if (resp.challengeName) {
          // navigate to ConfirmSignIn component which renders the form to enter authentication code (from SMS or the Authenticator app)
        }
      }
};
// component render() with username and password inputs and submit button...

ConfirSignIn组件的主要部分:

import { useAuthenticator } from "@aws-amplify/ui-react";
import { CognitoUser } from "amazon-cognito-identity-js";
// other imports, component definition and local state...

const onSubmit = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();
      setLoading(true);
      await Auth.confirmSignIn(user, code, AmplifyChallengeName.SMS)
        .then(async csi_data => {
          // calling this doesn't work... doesn't refresh the `useAuthenticator` return values
          const cognitoUser: CognitoUser = await Auth.currentAuthenticatedUser({ bypassCache: true });
          const currentSession = await Auth.currentSession();

          // calling this doesn't work either...
          cognitoUser.refreshSession(currentSession.getRefreshToken(), (err, session) => {
            const { idToken, refreshToken, accessToken } = session;
          });

          // calling this works... but feels wrong
          // window.location.reload();
        });
      }

// component render() with code input and submit button...

下面是包含<Authenticator>的Login组件:

import { Authenticator, AuthenticatorProps, useAuthenticator } from "@aws-amplify/ui-react";
import AuthenticatorWrapper from "./AuthenticatorWrapper";
// other imports

const customizedAuthRoutes = ["signIn", "confirmResetPassword"]; //

// component definition...

  const renderCustomizedRoute = useCallback(() => {
    switch (route) {
      case "signIn":
        return <SignIn />;

      case "confirmResetPassword":
      default:
        return (
          <ConfirmResetPassword />
        );
    }
  }, [route]);

  return (
    <AuthenticatorWrapper>
      {customizedAuthRoutes.includes(route) ? (
        renderCustomizedRoute()
      ) : (
        <Authenticator
          services={services}
          className="Login"
          hideSignUp
          components={components}
          formFields={formFields}
        >
          {children}
        </Authenticator>
      )}
    </AuthenticatorWrapper>
  );

验证器包装:

export default function AuthenticatorWrapper({ children }: PropsWithChildren) {
  const { authStatus } = useAuthenticator(context => [context.authStatus]);

  if (authStatus === "unauthenticated") {
    return (
      <div className="LogoContentCopyrightLayout">
        <Logo className="LoginLogo" />
        {children}
        <Copyright />
      </div>
    );
  }
  return <>{children}</>;
}