尝试登录 Azure 时出错：BrowserAuthError

Question

我在尝试使用 Azure + TypeScript/JavaScript 登录时遇到错误。 问题是当用户登录并需要重定向到另一个页面时。 当登录响应正常时，页面保持空白，我需要手动刷新。

这是我的配置文件：

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)

该页面保持空白，直到我对其进行手动刷新。 通过手动刷新，重定向工作，但没有它，页面仍然冻结。

我在 StackOverflow 和其他博客上尝试了一些解决方案，但没有成功。

感谢大家提供的任何帮助！

Answer 1

将 instance.loginRirect 更改为 instance.loignPopup，这将解决该问题

Answer 2

问题已解决：重点是没有依赖关系的 useEffect。 添加它解决了问题，现在重定向无需手动更新页面即可工作。