如何使用MSAL-React类组件?

Question

我在react项目中使用https://www.npmjs.com/package/@azure/msal-react。库提供的钩子可以很容易地执行验证。

在功能组件中，获取访问令牌，

if (account && inProgress === "none") {
instance.acquireTokenSilent({
...loginRequest,
account: account
}).then((response) => {
callMsGraph(response.accessToken).then(response => setGraphData(response));
});
}

当使用const { instance, accounts, inProgress } = useMsal();

时，需要调用

但是我需要调用api从类组件中获取数据。那么，如何在类组件

中实现相同的功能呢?

Answer 1

您不能访问类组件中的msal-react钩子，因此要做到这一点，您要么需要访问原始上下文，要么使用更高阶的组件包装。

下面的示例来自文档，修改为您关于访问instance, accounts, inProgress以进行后续API调用的问题。

使用原始上下文

import React from "react";
import { MsalContext } from "@azure/msal-react";
class YourClassComponent extends React.Component {
static contextType = MsalContext;
render() {
const msalInstance = this.context.instance;
const msalAccounts = this.context.accounts;
const msalInProgress = this.context.inProgress;
// rest of your render code
}
}

}

使用Higher-Order-Component

import React from "react";
import { withMsal } from "@azure/msal-react";
class YourClassComponent extends React.Component {
render() {
const msalInstance = this.props.msalContext.instance;
const msalAccounts = this.props.msalContext.accounts;
const msalInProgress = this.props.msalContext.inProgress;
// rest of your render code
}
}
export default YourWrappedComponent = withMsal(YourClassComponent);

两种方式都可以，这是个人喜好。为了可读性，我更喜欢访问原始上下文而不是包装。