Question

我有一个使用Auth0签名后也会返回用户的网址。当他们点击此网址时，我叫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';

}

将调用localstorage的函数转换为异步等待

1 个答案: