如何在 Promise 解决之前执行代码

Question

使用 msal library 时，可以使用重定向流程进行身份验证。这意味着用户将导航到 Microsoft 登录页面，并在成功验证后导航回 SPA。以下代码处理此问题：

auth
  .handleRedirectPromise()
  .then(() => {
    const { setAccountID } = useAccount()
    setAccountID()
  })
  .catch((error) => {
    console.log('login with redirect failed: ', error)
  })

msal 方法 handleRedirectPromise returns 一个 Promise，一旦它被解决，我们就用它来设置登录帐户。但是，如果可以在调用此 Promise 之前将加载按钮的状态设置为 true ，那就太好了。

有没有办法 "hook in" Promise，以便可以在调用它之前执行一些代码？

用伪术语来说，它会是这样的：如果调用 handleRedirectPromise，将按钮状态加载设置为 true，一旦解决，将其设置为 false。

Answer 1

怎么样：

const temp = auth.handleRedirectPromise()

// set the button state

temp.then(() => {
    // set the button state here
    const { setAccountID } = useAccount()
    setAccountID()
  })
  .catch((error) => {
    console.log('login with redirect failed: ', error)
  })

Answer 2

上面 asliwinski 的回答是正确的方法。在实例化 PublicClientApplication 之前将按钮的状态设置为加载，然后在 handleRedirectPromise 完成后设置状态。

更多上下文：MSAL.js 将在 PublicClientApplication 的构造函数中调用此方法，并且在每次页面加载时都会运行，即使您没有从重定向返回手术。这意味着您不需要确定 handleRedirectPromise 是否是运行，因为它每次都会运行。您可以结合使用传统的承诺语义和承诺的解析值来确定发生了什么：

let msalLoading = true;

const msalInstance = new PublicClientApplication();

msalInstance.handleRedirectPromise()
  .then(result => {
     msalLoading = false;

     if (result) {
      // If result is truthy, your app returned from a redirect operation,
      // and it completed successfully
     } else {
       // If .then was called but result is falsey, that means your app is not returning
       // from a redirect operation (e.g. user visiting the site for the first time)
     }
  })
  .catch(error => {
     msalLoading = false;

     // If .catch is called, this means your app was returning from a redirect operation
     // and an error occurred.
   });

Answer 3

如果你使用MSAL的重定向，它基本上会打开MS的新页面供用户进行身份验证，然后MSAL会重定向回App端。

handleRedirectPromise() 在 MSAL 获得响应后启动。好吧，这需要几秒钟，所以 handleRedirectPromise() 中的所有内容都会在那之后生效。

因此，为了能够处理这个几秒钟的时间范围，在您从 MS 页面重定向到应用程序端之后，在 handleRedirectPromise() 之前，您可以执行以下操作：

新的黑页或少量代码来处理重定向和承诺
当用户单击“登录”时，我将一个标志设置为 true，然后重定向到 MS 页面。如果您使用 React 中的 LocalStorage 或 userSelector 从商店获取它，则可以使用 localStorage 或 Reducer 来存储此标志，然后使用 getItem 使用它。

在 return 后面，因为我们有一个 true 标志，所以我显示加载，在 handleRedirectPromise return 承诺之后，我将用户重定向到欢迎页面。

如何在 Promise 解决之前执行代码

How to execute code before a Promise is resolved

javascript

msal.js