Vue.js SPA中MSAL loginRedirect的正确集成与令牌管理

// msalConfig.ts
import { Configuration } from "@azure/msal-browser";

export const MSAL_CONFIG: Configuration = {
  auth: {
    clientId: "YOUR_CLIENT_ID", // 替换为您的应用客户端ID
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID", // 替换为您的认证机构
    redirectUri: "http://localhost:3000/redirect-page", // 替换为您的重定向URI
  },
  cache: {
    cacheLocation: "localStorage", // 配置为localStorage以持久化缓存
    storeAuthStateInCookie: false, // 建议在SPA中设置为false
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case 0: // Verbose
            console.debug(message);
            return;
          case 1: // Info
            console.info(message);
            return;
          case 2: // Warning
            console.warn(message);
            return;
          case 3: // Error
            console.error(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
  },
};

// main.ts 或全局 store
import { PublicClientApplication } from "@azure/msal-browser";
import { MSAL_CONFIG } from "./msalConfig";
import router from "./router"; // 假设您有Vue Router

// 初始化 MSAL 实例
export const msalInstance = new PublicClientApplication(MSAL_CONFIG);

async function initializeMsalAndHandleRedirect() {
  try {
    // 1. 关键：在应用加载时处理重定向响应
    const response = await msalInstance.handleRedirectPromise();

    if (response) {
      // 如果存在重定向响应，说明认证流程已完成
      console.log("MSAL redirect handled successfully:", response);
      // 此时，账户信息和令牌已存储在MSAL缓存中
      // 您可以根据需要更新UI或执行后续操作
    } else {
      // 没有重定向响应，可能是首次加载或用户直接导航
      console.log("No MSAL redirect response, checking for existing accounts.");
    }

    // 2. 无论是否有重定向响应，处理后都可以获取当前账户
    const accounts = msalInstance.getAllAccounts();
    if (accounts.length > 0) {
      console.log("Active account found:", accounts[0]);
      // 可以在此处设置活动账户，并尝试静默获取令牌
      msalInstance.setActiveAccount(accounts[0]);
      // 示例：获取访问令牌
      // const accessToken = await msalInstance.acquireTokenSilent({
      //   scopes: ["user.read"], // 您的API范围
      //   account: accounts[0],
      // });
      // console.log("Access Token:", accessToken.accessToken);

      // 如果当前在重定向页面，并且已成功处理认证，可以导航到主页
      if (router.currentRoute.value.path === MSAL_CONFIG.auth.redirectUri.split('://')[1].split('/')[1]) { // 简单判断是否在重定向路径
         router.push({ name: "shop-home-page" });
      }
    } else {
      console.log("No active account found. User might need to log in.");
      // 如果没有账户，并且用户尚未登录，可以引导用户登录
      // 例如，如果不在登录页，可以重定向到登录页
    }
  } catch (error) {
    console.error("MSAL initialization or redirect handling error:", error);
    // 处理错误，例如显示错误消息，或引导用户重新登录
  }
}

// 在应用启动时调用此函数
initializeMsalAndHandleRedirect();

// 登录函数
export function openLoginRedirect() {
  msalInstance.loginRedirect();
}

<!-- RedirectPage.vue -->
<template>
  <div>您将在5秒后被重定向...</div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
// import router from "@/router"; // 路由已在全局处理

onMounted(() => {
  // 这里的逻辑可以简化，因为MSAL的重定向处理应在全局完成
  // 如果全局处理成功，应用状态会更新，然后可以触发导航
  // 可以在这里设置一个倒计时，倒计时结束后检查认证状态并导航
  setTimeout(() => {
    // 假设全局MSAL处理已完成，并且账户已可用
    // 此时，如果全局逻辑没有自动导航，可以在这里手动导航
    // router.push({ name: "shop-home-page" });
  }, 5000);
});
</script>

<style scoped lang="scss">
/* 样式 */
</style>

// 在需要调用API的地方
import { msalInstance } from './main'; // 导入全局MSAL实例

async function callApiWithToken() {
  const account = msalInstance.getActiveAccount(); // 获取当前活动账户

  if (!account) {
    console.error("No active account. User needs to log in.");
    // 引导用户登录
    return;
  }

  try {
    const response = await msalInstance.acquireTokenSilent({
      scopes: ["api://your_client_id/access_as_user"], // 替换为您的API范围
      account: account,
    });
    const accessToken = response.accessToken;
    console.log("Acquired access token:", accessToken);

    // 使用accessToken调用您的API
    // const apiResponse = await fetch("your_api_endpoint", {
    //   headers: {
    //     Authorization: `Bearer ${accessToken}`,
    //   },
    // });
    // const data = await apiResponse.json();
    // console.log("API response:", data);

  } catch (error) {
    console.error("Error acquiring token silently:", error);
    // 如果静默获取失败，可能需要交互式登录
    if (error instanceof Error && error.name === "InteractionRequiredAuthError") {
      msalInstance.acquireTokenRedirect({
        scopes: ["api://your_client_id/access_as_user"],
      });
      // 或者 msalInstance.acquireTokenPopup({...});
    }
  }
}