Блог

Главная - Вопросы по программированию - Как запустить функцию при перезагрузке react

Как запустить функцию при перезагрузке react

#reactjs #asynchronous #redux #amazon-cognito #refresh

Вопрос:

Я использую congnito для аутентификации И пытаюсь создать частный маршрут.

В настоящее время я использую redux и amazon-cognito-identity-js

 export const cognitoSignIn = async ({
  email,
  password,
}: SignInInfo): Promise<CognitoUserSession> => {
  return new Promise((resolve, reject) => {
    console.log(email, password);

    const authenticationDetails = new AuthenticationDetails({
      Username: email.trim(),
      Password: password.trim(),
    });
    const cognitoUser = new CognitoUser({
      Username: email,
      Pool: userPool,
    });

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => {
        if (!currentUser) {
          currentUser = userPool.getCurrentUser();
        }

        currentUser.getSession((err: any, session: CognitoUserSession) => {
          if (err) {
            reject(err);
          } else {
            resolve(session);
          }
        });
      },
      onFailure: reject,
    });
  });
}; 
 export const signIn =
  (signinInfo: SignInInfo) =>
  async (dispatch: Dispatch<UpdateToken | UpdateError>) => {
    try {
      const auth: CognitoUserSession = await cognitoSignIn(signinInfo);
      const accessToken = auth.getAccessToken().getJwtToken();

      localStorage.setItem("user", JSON.stringify(accessToken));
      dispatch(updateToken(accessToken));
    } catch (error: any) {
      dispatch(updateError(error));
    }
  };

Мой вопрос не имеет ничего общего с приведенным выше кодом.

Когда вы подписываете cognito, в localstorage создается токен.

при обновлении, чтобы получить состояние токена в localstorage, вам нужно использовать функцию cognito getSession.

Но функция getSession является асинхронной функцией

Как я могу получить данные, выполнив функцию до ее отображения?

Ответ №1:

Мое предложение состоит в том, чтобы использовать «состояние загрузки», которое отображается до тех пор, пока вы ждете свою асинхронную функцию.

Напр.:

 const example = () => {
    useState[isLoading, setIsLoading] = useState(false)
    
    useEffect(() => {
        const asyncFunction = async() => {
            setIsLoading(true)
            await(something...)
            setIsloading(false)
        }
        asyncFuntion()  
    }, [])

    if(isLoading) return (e.g LoadingSpinner)

    return (your component)
}
Метки: