Panggilan balik peristiwa di MSAL React

Pada umumnya, @azure/msal-react menyembunyikan kerumitan pemanggilan login dan penanganan respons. Sebagai pengembang aplikasi, Anda sebagian besar dibiarkan untuk menentukan komponen mana yang harus dilindungi dan metode mana yang ingin Anda gunakan untuk memasukkan pengguna Anda, tetapi mungkin kurang peduli dengan spesifik respons. Namun, mungkin ada kasus di mana aplikasi Anda membutuhkan akses langsung ke respons panggilan masuk atau mungkin Anda perlu menangani kesalahan tertentu. @azure/msal-browser menyediakan Event API yang dapat Anda gunakan untuk keperluan ini. Artikel ini akan memandu Anda memahami cara memanfaatkan hal ini dalam aplikasi React.

Mendaftarkan dan membatalkan pendaftaran panggilan balik peristiwa

Dengan menggunakan API peristiwa, Anda dapat mendaftarkan panggilan balik peristiwa yang akan melakukan sesuatu saat peristiwa dipancarkan. Saat mendaftarkan panggilan balik peristiwa dalam komponen react, Anda harus memastikan Anda melakukan 2 hal.

  1. Panggilan balik hanya didaftarkan sekali.
  2. Panggilan balik tidak terdaftar sebelum komponen dilepas.

Komponen Fungsional

Dalam komponen fungsi, Anda dapat menggunakan hook useEffect dengan array dependensi kosong untuk melakukannya. Contoh ditampilkan dalam cuplikan berikut.

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);
            }
        }
        
    }, []);
}

Komponen berbasis kelas

Dalam komponen kelas, Anda dapat menggunakan componentDidMount dan componentWillUnmount untuk mencapai hal ini.

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);
        }
    }
}

Menyinkronkan log masuk status di seluruh tab dan jendela

Jika Anda ingin memperbarui UI saat pengguna login atau logout di aplikasi Anda melalui tab atau jendela lain, Anda dapat memantau peristiwa ACCOUNT_ADDED dan ACCOUNT_REMOVED. Payload akan berisi objek AccountInfo yang ditambahkan atau dihapus.

Peristiwa ini tidak akan dipancarkan secara default. Untuk mengaktifkan peristiwa ini, Anda harus memanggil enableAccountStorageEvents API sebelum mendaftarkan panggilan balik peristiwa Anda:

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);
            }
        }
        
    }, []);
}

Baca juga

  • Last updated on