如何修复循环身份验证和重定向反应

Question

LOGIN.TSX

   function Login() {
      const router = useRouter();
      const creds = useCredentials();
      const auth = useAuth();
      const [loading, setLoading] = useState(false);
    
      function login(data: { username: string, password: string, building: string }) {
        data['building'] = 'building1';
        setLoading(true);
        auth.login({
          ...data,
          remember: false
        }).then(res => {
          setLoading(false);
          router.push(`${router.query['url'] || '/'}`);
        }).catch(err => {
          console.log(err);
          setLoading(false);
        });
      }
    
      useEffect(() => {
        // redirect user if already loggedin
        if (auth.isAuthenticated) {
            router.push('/');
          }
      }, [ creds?.user ]);
    
      return (<>
        <LoginPage appName="School" onSubmit={login} loading={loading}/>
      </>)
    }

AUTH.TSX

function useAuth() {
  const credState = useCredentials();
  const creds = credState || getSavedCredentials();
  const updateCreds = useCredentialUpdate();

  return {
    login: (payload: {
      username: string;
      password: string;
      building: string;
      server?: keyof typeof serverConfig;
      remember: boolean;
    }): Promise<UserCredential> => {
      return new Promise((resolve, reject) => {
        const options = {
          headers: { 'Content-Type': 'application/json' }
        }
        if (!payload.server) {
          payload.server = 'sandbox';
        }

        Axios.defaults.baseURL = serverConfig[payload.server].api;
        delete payload.server;
        delete payload.remember;
        
        Axios.post("/auth", payload, options).then(function (response: AxiosResponse) {
          const DATA = {
            token: response.data['token'],
            user: response.data['user'],
            building: response.data['user']['building'],
            remember: payload.remember,
            server: payload.server,
          };

          if (response.status === 200) {
            updateCreds({ type: CredsActions.UPDATE, payload: DATA });
          }

          resolve(DATA);
        }).catch(function (error: Error) {
          console.log(error);
          reject(error);
        });
      });
    },
    isAuthenticated: !!(creds && creds.user),
    user: creds && creds.user
  }
}

在网络上无限循环登录后如何解决登录原因。

它会成功，然后输出将是这样的。

相反，它将重定向到 webpack-hmr?page=/```` when it success then when it failed it will direct to webpack-hmr?page=/login```

我正在使用 axios 调用 api。

因为在我不使用任何 API 之前，这就是它重定向到“/”的原因。

这是登录页面：

export default function Login({ appName, formBG, appLogo, onSubmit, loading, customForm, servers }: LoginProps) {
  const [formData, setFormData] = useState<LoginModel>();
  const [formError, setFormError] = useState({ show: false, creds: false, isValid: false });
  const formRef = useRef(null);
  const theme = useTheme();

  const formChange = (value: LoginModel) => {
    const { formContextValue } = formRef && formRef.current || {};

    setFormData(value);
    setFormError({
      isValid: ValidateForm({ model: formContextValue.model, data: value }),
      creds: false,
      show: false
    });
  };

  const formSubmit = (isValid: boolean) => {
    if (isValid && onSubmit) {
      onSubmit(formData);
    }
  }

  const LoginSVG = useMemo(() => styled.div`
    background-image: url(${formBG || LoginArtBG});
  `, [formBG]);

  const loginForm = useMemo(() => {
    if (customForm) {
      return customForm;
    }

    return <>
      <LoginForm formRef={formRef} submit={formSubmit} valueChange={formChange} servers={servers} />
      <div className={styles['form-controls']}>
        {formError.show
          ? <Message className="my-2"
            description={formError.creds ? "Incorrect username or password." : "Internal Server Error."}
            type="error" showIcon />
          : null
        }

        <LoginButton
          className={styles['login-button'] + ' mt-2 rounded-full'}
          appearance="primary"
          type="button"
          loading={loading}
          disabled={!formError.isValid}
          onClick={() => formSubmit(formError.isValid)}
          theme={theme}>SIGN IN</LoginButton>
      </div>
    </>
  }, [customForm, formRef, formError]);

  return (
    <LoginBody className={styles['login-body'] + ' min-h-screen min-w-full flex items-center justify-center'} theme={theme}>
      <section className={styles['login-form-wrapper']}>
        <LoginArt className={styles['login-art']} theme={theme}>
          <LoginSVG className={styles['login-art-svg']}>
            <label>{appName}</label>
          </LoginSVG>
        </LoginArt>

        <section>
          <p>Enter your username and password to continue</p>

          {loginForm}
        </section>
      </section>
    </LoginBody>
  );
}

我添加了登录页面。