问尝试登录Azure: BrowserAuthError时出错

EN

import { Configuration, LogLevel } from "@azure/msal-browser"

export const msalConfig:Configuration = {
    auth: {
        clientId: process.env.AZURE_CLIENT_LOGIN || "",
        authority: "https://login.microsoftonline.com/" + process.env.AZURE_AUTH_LOGIN,
        redirectUri: "/admin/dashboard"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {   
        loggerOptions: {    
            loggerCallback: (level: any, message: any, containsPii: any) => {   
                if (containsPii) {      
                    return;     
                }       
                switch (level) {        
                    case LogLevel.Error:        
                        console.error(message);     
                        return;     
                    case LogLevel.Info:     
                        console.info(message);      
                        return;     
                    case LogLevel.Verbose:      
                        console.debug(message);     
                        return;     
                    case LogLevel.Warning:      
                        console.warn(message);      
                        return;     
                }   
            }   
        }   
    }
}

export const loginRequest = {
    scopes: ["User.Read"]
};

export const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
};

import React, { useEffect } from 'react';
import type { NextPage } from "next";
import { useRouter } from 'next/router';


import { useMsal } from '@azure/msal-react';
import { useIsAuthenticated } from '@azure/msal-react';
import { loginRequest } from '../services/azureLoginApi';


const Home: NextPage = () => {
  const router = useRouter()

  const { instance } = useMsal()
  const isAuthenticated = useIsAuthenticated()

  const redirectToAzureLogin = () => {
    instance.loginRedirect(loginRequest).catch((e:any) => {
      console.log(e);
    });
  }

  const redirectToDashboard = () => {
    router.push('/admin/dashboard')
  }

  useEffect(()=>{
    if(isAuthenticated)
      redirectToDashboard()
    else
      redirectToAzureLogin()
  },[])
  return (
      <div className="index">
      </div>
  );
};

export default Home;

BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.
    at BrowserAuthError.AuthError [as constructor] (AuthError.js?d98c:27:1)
    at new BrowserAuthError (BrowserAuthError.js?be02:197:1)
    at Function.BrowserAuthError.createInteractionInProgressError (BrowserAuthError.js?be02:264:1)
    at BrowserCacheManager.setInteractionInProgress (BrowserCacheManager.js?6011:886:23)
    at PublicClientApplication.ClientApplication.preflightInteractiveRequest (ClientApplication.js?9c57:777:1)
    at PublicClientApplication.ClientApplication.preflightBrowserEnvironmentCheck (ClientApplication.js?9c57:762:1)
    at PublicClientApplication.eval (ClientApplication.js?9c57:220:1)
    at step (_tslib.js?89f4:75:1)
    at Object.eval [as next] (_tslib.js?89f4:56:46)
    at eval (_tslib.js?89f4:49:1)
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js?89f4:45:1)
    at PublicClientApplication.ClientApplication.acquireTokenRedirect (ClientApplication.js?9c57:214:25)
    at PublicClientApplication.eval (PublicClientApplication.js?1b7b:63:1)
    at step (_tslib.js?89f4:75:1)
    at Object.eval [as next] (_tslib.js?89f4:56:46)
    at eval (_tslib.js?89f4:49:1)
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js?89f4:45:1)
    at PublicClientApplication.loginRedirect (PublicClientApplication.js?1b7b:58:25)
    at redirectToAzureLogin (index.tsx?db76:18:14)
    at eval (index.tsx?db76:31:7)
    at invokePassiveEffectCreate (react-dom.development.js?61bb:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js?61bb:23574:1)
    at unstable_runWithPriority (scheduler.development.js?3069:468:1)
    at runWithPriority$1 (react-dom.development.js?61bb:11276:1)
    at flushPassiveEffects (react-dom.development.js?61bb:23447:1)
    at eval (react-dom.development.js?61bb:23324:1)
    at workLoop (scheduler.development.js?3069:417:1)
    at flushWork (scheduler.development.js?3069:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?3069:157:1)