Events

从版本 2.4 开始的 Msal-Browser （@azure/msal-browser） 现在提供可供核心库和包装库的用户使用的事件 API。 这些事件与身份验证和 MSAL 执行的操作相关，可用于应用程序更新 UI、显示错误消息等。

事件的外观

export type EventMessage = {
    eventType: EventType;
    interactionType: InteractionType | null;
    payload: EventPayload;
    error: EventError;
    timestamp: number;
};

有效负载和错误 EventMessage 的定义如下：

export type EventPayload = PopupRequest | RedirectRequest | SilentRequest | SsoSilentRequest | EndSessionRequest | AuthenticationResult | PopupEvent | null;

export type EventError = AuthError | Error | null;

如何在 msal-browser 中发出事件

Msal-browser 具有受保护的函数 emitEvent，并在主要 API 中发出事件。 有关当前发出的事件的列表，请参阅下表。

下面是 msal-browser 如何使用有效负载或错误发出事件的示例：

this.emitEvent(EventType.LOGIN_SUCCESS, InteractionType.Redirect, result);

this.emitEvent(EventType.LOGIN_FAILURE, InteractionType.Redirect, null, e);

如何使用事件 API

Msal-browser 导出 addEventCallback 采用回调函数的函数，并可用于处理发出的事件。

下面是如何使用应用程序中发出的事件的示例：

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    // Update UI or interact with EventMessage here
    if (message.eventType === EventType.LOGIN_SUCCESS) {
        console.log(message.payload);
     }
});

添加事件回调将返回 ID。此 ID 可用于在必要时使用 msal-browser 导出的 removeEventCallback 函数删除回调：

msalInstance.removeEventCallback(callbackId);

错误管理

由于定义方式 EventError ，处理事件发出的错误可能需要验证错误是否为正确的类型，然后才能访问所发出错误的特定属性。 可以将错误强制转换为 AuthError 或检查它是否为实例 AuthError。

下面是使用发出的事件并强制转换错误的示例：

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    // Update UI or interact with EventMessage here
    if (message.eventType === EventType.LOGIN_FAILURE) {
        if (message.error instanceof AuthError) {
            // Do something with the error
        }
     }
});

从事件获取交互状态

可以使用 getInteractionStatusFromEvent API 从事件获取当前交互状态：

下面是在未进行交互时显示消息的示例：

const callbackId = msalInstance.addEventCallback((message: EventMessage) => {
    const status = EventMessageUtils.getInteractionStatusFromEvent(message);

    // Update UI or interact with EventMessage here
    if (status === InteractionStatus.None) {
        console.log(message.payload);
    }
});

跨选项卡和窗口同步登录状态

如果想要在用户登录或注销应用时更新 UI，或者在不同的选项卡或窗口中更改活动帐户，则可以订阅、LOGIN_SUCCESSLOGOUT_SUCCESS事件和ACTIVE_ACCOUNT_CHANGED事件。

• 对于帐户添加和删除，有效负载将是 AccountInfo 添加或删除的对象。
• 对于活动帐户更新，不会有有效负载

msalInstance.addEventCallback((message: EventMessage) => {
    if (message.eventType === EventType.LOGIN_SUCCESS) {
        // Update UI with new account
    } else if (message.eventType === EventType.LOGOUT_SUCCESS) {
        // Update UI with account logged out
    } else if (message.eventType === EventType.ACTIVE_ACCOUNT_CHANGED) {
        const accountInfo = msalInstance.getActiveAccount();
        // Update UI with new active account info
    }
});

事件表

这些事件当前由 msal-browser 发出。