Återanropsfunktioner för händelser i MSAL React

För det mesta @azure/msal-react abstraherar bort inloggningsanrop och hanteringen av svaret. Som programutvecklare är du oftast kvar för att avgöra vilka komponenter som ska skyddas och vilken metod du vill använda för att logga in dina användare, men kan vara mindre intresserad av detaljerna i svaret. Det kan dock finnas fall där ditt program behöver direkt åtkomst till svaret från ett inloggningsanrop eller kanske du behöver hantera ett specifikt fel. @azure/msal-browser exponerar ett händelse-API som du kan använda för detta ändamål. Den här artikeln beskriver hur du kan dra nytta av detta i en react-app.

Registrera och avregistrera ett händelseåteranrop

Med hjälp av händelse-API:et kan du registrera ett händelseåteranrop som gör något när en händelse genereras. När du registrerar ett händelseåteranrop i en react-komponent måste du se till att du gör två saker.

  1. Återanropet registreras bara en gång.
  2. Återanropet avregistreras innan komponenten demonteras.

Funktionskomponent

I en funktionskomponent kan du använda en useEffect krok med en tom beroendematris för att uppnå detta. Ett exempel visas i följande kodfragment.

import { useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { EventType } from "@azure/msal-browser";

function EventExample() {
    const { instance } = useMsal();

    useEffect(() => {
        // This will be run on component mount
        const callbackId = instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.LOGIN_SUCCESS) {
                const result = message.payload;    
                // Do something with the result
            }
        });

        return () => {
            // This will be run on component unmount
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        }
        
    }, []);
}

Klasskomponent

I en klasskomponent kan du använda componentDidMount och componentWillUnmount för att uppnå detta.

class EventExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            callbackId: null;
        }
    }

    componentDidMount() {
        // This will be run on component mount
        const callbackId = this.props.msalContext.instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.LOGIN_SUCCESS) {
                const result = message.payload;    
                // Do something with the result
            }
        });

        this.setState({callbackId: callbackId});
    }

    componentWillUnmount() {
        // This will be run on component unmount
        if (this.state.callbackId) {
            this.props.msalContext.instance.removeEventCallback(this.state.callbackId);
        }
    }
}

Synkronisering av inloggningsstatus mellan flikar och fönster

Om du vill uppdatera användargränssnittet när en användare loggar in i eller ut ur appen på en annan flik eller i ett annat fönster kan du prenumerera på händelserna ACCOUNT_ADDED och ACCOUNT_REMOVED. Nyttolasten är det AccountInfo objekt som har lagts till eller tagits bort.

Dessa händelser genereras inte som standard. För att aktivera dessa händelser måste du anropa API:et enableAccountStorageEvents innan du registrerar dina händelseåteranrop:

import { useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { EventType } from "@azure/msal-browser";

function EventExample() {
    const { instance } = useMsal();

    useEffect(() => {
        // This will be run on component mount
        instance.enableAccountStorageEvents();
        const callbackId = instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.ACCOUNT_ADDED) {
                const account = message.payload;    
                // Update UI
            } else if (message.eventType === EventType.ACCOUNT_REMOVED) {
                const account = message.payload;
                // Update UI
            }
        });

        return () => {
            // This will be run on component unmount
            instance.disableAccountStorageEvents();
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        }
        
    }, []);
}

Se även

  • Last updated on