Преобразовать функцию, вызывающую localalstorage, в асинхронное ожидание

Question

У меня есть URL-адрес, по которому пользователи возвращаются после подписания с Auth0. Когда они попадают в этот URL, я звоню auth.handleAuthentication()

В моем компоненте React:

class AuthCallback extends React.Component {
  componentDidMount() {
    auth.handleAuthentication();
  }

Эта функция называется:

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
      } else if (err) {
        console.error(err);
      }
    });
  }

 setSession(authResult) {
    let expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime(),
    );
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('AUTH_TOKEN', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
  }

Мне нужно сделать что-то асинхронно после того, как handleAuthentication() и setSession() закончили свою работу.

Я попытался просто добавить async await, но кажется, что код работает синхронно.

class AuthCallback extends React.Component {
  async componentDidMount() {
    await auth.handleAuthentication();
    // DO STUFF
    window.location.hash = '';
    window.location.pathname = '/auth-callback-login';
  }

Answer 1

Только что завернул функцию, которую нужно ждать, чтобы вернуть обещание

handleAuthentication() {
 return new Promise((resolve, reject) => {
   this.auth0.parseHash((err, authResult) => {
     if (authResult && authResult.accessToken && authResult.idToken) {
       this.setSession(authResult);
       return resolve(authResult);
   } else if (err) {
     console.error(err);
     reject(err);
   }
  });
 });

Тогда вы можете сделать это

class AuthCallback extends React.Component {
  async componentDidMount() {
  await auth.handleAuthentication();
  // DO STUFF
  window.location.hash = '';
  window.location.pathname = '/auth-callback-login';

}