Prestanda för MSAL React

Så här konfigurerar @azure/msal-react du för att använda routerns navigeringsfunktion för navigering på klientsidan

Som standard, när MSAL.js behöver navigera från en sida i programmet till en annan, tilldelar den om window.location, vilket leder till en fullständig omdirigering av ramen till den andra sidan och gör att programmet renderas om. Om du använder en router kan detta vara olämpligt, eftersom många routrar erbjuder en metod som du kan använda för att göra navigering på klientsidan och bara rendera om de delar av sidan som behöver renderas om.

För närvarande finns det ett scenario där MSAL.js navigerar från en sida i programmet till en annan. Om ditt program gör alla följande saker, fortsätt läsa:

  • Ditt program använder omdirigeringsflödet i stället för popup-flödet för att logga in
  • PublicClientApplication har konfigurerats med auth.navigateToLoginRequestUrl: true (standard)
  • Ditt program har sidor som kan anropa loginRedirect/acquireTokenRedirect med en delad redirectUri, dvs. du anropar loginRedirect från http://localhost/protected med en redirectUri på http://localhost

Om din applikation gör allt ovanstående kan du åsidosätta den metod som Msal använder för att navigera genom att skapa en egen implementering av INavigationClient och anropa setNavigationClient på din PublicClientApplication-instans innan du renderar MsalProvider.

Observera: Vi rekommenderar MsalProvider återges ovanför komponenterna Route och funktionen navigateInternal returnerar false. När navigateInternal returnerar false, bearbetas tokenen direkt efter navigeringen. Om MsalProvider renderas på nytt till följd av navigering bör din navigateInternal-funktion returnera true så att token bearbetas som en del av omrenderingen.

Exempel på implementering

Varje router har sin egen metod för att göra navigering på klientsidan och beroende på hur de exponerar metoden kan du behöva omstrukturera ditt program för att stödja den här funktionen. Exemplet nedan visar hur du implementerar detta för react-router-dom. Du hittar en fullständig exempelapp som implementerar detta för react-router-dom, Next.js och Gatsby.

Dessa exempel som nämns ovan använder react-router-dom v6. Om du vill använda react-router-dom v5 i stället kan du läsa: react-router-sample.

INavigationClient-implementering

import { NavigationClient } from "@azure/msal-browser";

/**
 * Extending the default NavigationClient allows you to overwrite just navigateInternal while continuing to use the default navigateExternal function
 * If you would like to overwrite both you can implement INavigationClient directly instead
 */
class CustomNavigationClient extends NavigationClient{
    constructor(navigate) {
        super();
        this.navigate = navigate // Passed in from useNavigate hook provided by react-router-dom;
    }
    
    // This function will be called anytime msal needs to navigate from one page in your application to another
    async navigateInternal(url, options) {
        // url will be absolute, you will need to parse out the relative path to provide to the history API
        const relativePath = url.replace(window.location.origin, '');
        if (options.noHistory) {
            this.navigate(relativePath, {replace: true});
        } else {
            this.navigate(relativePath);
        }

        return false;
    }
}

Tillhandahåll din anpassade NavigationClient till @azure/msal-browser

import { MsalProvider } from "@azure/msal-react";
import { BrowserRouter as Router , Routes, Route, useNavigate } from "react-router-dom";

function App({ msalInstance }) {
    // It's important that the Router component is above the Example component because you'll need to use the useHistory hook before rendering MsalProvider
    return (
        <Router>
            <Example msalInstance={msalInstance}/>
        </Router>
    );
};

function Example({ msalInstance }) {
    const navigate = useNavigate();
    const navigationClient = new CustomNavigationClient(navigate);
    msalInstance.setNavigationClient(navigationClient);

    return (
        <MsalProvider instance={msalInstance}>
            <Routes>
                <Route path="/protected" element={<ProtectedRoute />} />
                <Route path="/" element={<Home />} />
            </Routes>
        </MsalProvider>
    )
}
  • Last updated on