部署在azure中的下一个js应用程序中的MSAL导致注销问题

Question

我已在 Azure 中部署的下一个 js 应用程序中使用这些库来实现 MSAL：

"@azure/msal-browser": "3.2.0",
"@azure/msal-node": "2.15.0",
"@azure/msal-react": "2.1.1",

这是我的问题的描述。

用例 1：当应用程序加载且用户登录应用程序并尝试注销时，此注销按预期工作。

用例 2：当应用程序加载且用户登录、导航到其他页面，然后尝试注销时，会出现问题；注销失败并出现以下错误：

ClientConfigurationError：url_parse_error：URL 无法解析为适当的段。

BrowserAuthError：interaction_in_progress：交互当前正在进行中。调用交互API之前请确保本次交互已经完成

两个用例在本地都工作正常，问题仅发生在部署环境中。

如果需要任何其他信息，请更新。

这是注销处理程序：

const handleSignOut = async () => {
    if (inProgress !== InteractionStatus.None) {
      console.log(inProgress + " already in progress.");
      return;
    }
    console.log("envVars", envVars);
    if (!envVars.cloudInstance || !envVars.tenantId) {
      console.error(
        "envVars Invalid authority URL cloudInstance",
        envVars.cloudInstance
      );
      console.error("envVars Invalid authority URL tenantId", envVars.tenantId);
      return;
    }
    setIsLoading(true);
    deleteCookie("access_token");
    setIsLogoutInProgress(true);
    sessionStorage.removeItem(MSAL_INTERACTION_STATUS);
    try {
      if (inProgress === InteractionStatus.None) {
        await instance.logoutRedirect({
          postLogoutRedirectUri: "/",
          account: instance.getActiveAccount(),
        });
      } else {
        console.error("MSAL interaction in progress or status is invalid.");
      }
    } catch (e) {
      console.log(e);
    } finally {
      setIsLogoutInProgress(false);
      setIsLoading(false);
    }
  };

Answer 1

我创建了一个示例 Next.js 应用程序并成功注销，导航到另一个页面。

当我尝试你的代码时，我遇到了同样的问题，我已更改代码如下

我的page.js文件：

"use client";
import React, { useState, useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { InteractionStatus } from "@azure/msal-browser";
import { useRouter } from "next/navigation"; 

const Dashboard = () => {
    const { instance, inProgress } = useMsal();
    const router = useRouter();  
    const [isLoading, setIsLoading] = useState(false);
    const [isLogoutInProgress, setIsLogoutInProgress] = useState(false);
    const envVars = {
        cloudInstance: process.env.NEXT_PUBLIC_CLOUD_INSTANCE,
        tenantId: process.env.NEXT_PUBLIC_TENANT_ID,
    };
    useEffect(() => {
        console.log("Loaded Environment Variables:", envVars);
    }, []);
    const handleSignOut = async () => {
        if (inProgress !== InteractionStatus.None) {
            console.log("Logout already in progress.");
            return;
        }
        if (!envVars.cloudInstance || !envVars.tenantId) {
            console.error("Invalid environment variables", envVars);
            return;
        }
        setIsLoading(true);
        setIsLogoutInProgress(true);
        try {
            sessionStorage.removeItem("msalInteractionStatus");          
            await instance.logoutRedirect({
                postLogoutRedirectUri: "/", 
                account: instance.getActiveAccount(),
            });
            router.push("/");
        } catch (error) {
            console.error("Logout error:", error);
        } finally {
            setIsLogoutInProgress(false);
            setIsLoading(false);
        }
    };
    return (
        <div>
            <h1>Dashboard</h1>
            <button onClick={handleSignOut} disabled={isLogoutInProgress}>
                {isLogoutInProgress ? "Logging out..." : "Logout"}
            </button>
        </div>
    );
};
export default Dashboard;

• 我添加了

  useRouter

  来正确处理导航。
• 还在我的代码中添加了

  router.push("/")

  以在注销后导航到主页。
• 确保在 Azure Web App 的配置部分添加以下环境变量。

这是部署后的输出。

退出成功。