在Vue.js中高效集成MSAL loginRedirect与令牌管理

import * as msal from "@azure/msal-browser";
import { reactive } from "vue";
import router from "@/router"; // 假设您有Vue Router实例

// MSAL配置
const MSAL_CONFIG = {
  auth: {
    clientId: "YOUR_CLIENT_ID", // 替换为您的实际客户端ID
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID", // 替换为您的租户ID或authority URL
    redirectUri: "http://localhost:3000/redirect-page", // 确保与Azure AD注册的重定向URI匹配
  },
  cache: {
    cacheLocation: "localStorage", // 配置为localStorage
    storeAuthStateInCookie: false, // 通常不需要在SPA中开启
  },
};

interface MsalStore {
  msalInstance: msal.PublicClientApplication | null;
  isAuthenticated: boolean;
  account: msal.AccountInfo | null;
  accessToken: string | null;
  initMsalInstance(): void;
  openLoginRedirect(): Promise<void>;
  handleRedirectAndAcquireToken(): Promise<void>;
  acquireAccessTokenSilent(): Promise<string | null>;
  logout(): Promise<void>;
}

export const mystore = reactive<MsalStore>({
  msalInstance: null,
  isAuthenticated: false,
  account: null,
  accessToken: null,

  initMsalInstance() {
    if (!this.msalInstance) {
      this.msalInstance = new msal.PublicClientApplication(MSAL_CONFIG);
      // 可以在这里注册事件监听器，例如登录成功、失败等
      this.msalInstance.addEventCallback((event: msal.EventMessage) => {
        if (event.eventType === msal.EventType.LOGIN_SUCCESS && event.payload) {
          const loginSuccessPayload = event.payload as msal.AuthenticationResult;
          this.account = loginSuccessPayload.account;
          this.isAuthenticated = true;
          console.log("Login success, account:", this.account);
        } else if (event.eventType === msal.EventType.LOGOUT_SUCCESS) {
          this.account = null;
          this.isAuthenticated = false;
          this.accessToken = null;
          console.log("Logout success");
        }
      });
    }
  },

  async openLoginRedirect() {
    this.initMsalInstance();
    try {
      await this.msalInstance!.loginRedirect(); // 触发重定向
    } catch (error) {
      console.error("Login redirect failed:", error);
    }
  },

  async handleRedirectAndAcquireToken() {
    this.initMsalInstance();
    try {
      // 1. 处理重定向响应
      const response = await this.msalInstance!.handleRedirectPromise();
      if (response) {
        // 如果有响应，表示登录或令牌获取成功
        this.account = response.account;
        this.isAuthenticated = true;
        this.accessToken = response.accessToken; // 如果是登录成功，这里可能已经有accessToken
        console.log("Redirect handled successfully. Account:", this.account);
        console.log("Initial Access Token:", this.accessToken);

        // 如果需要，可以再次尝试静默获取令牌，确保是最新的
        // await this.acquireAccessTokenSilent(); 
      } else {
        // 如果没有响应，但有账户信息，说明用户可能已经登录
        const accounts = this.msalInstance!.getAllAccounts();
        if (accounts.length > 0) {
          this.account = accounts[0];
          this.isAuthenticated = true;
          console.log("No redirect response, but existing account found:", this.account);
          // 尝试静默获取令牌
          await this.acquireAccessTokenSilent();
        } else {
          // 没有任何账户信息，可能需要用户重新登录
          console.warn("No account found after redirect handling.");
          this.isAuthenticated = false;
          this.account = null;
          this.accessToken = null;
        }
      }
    } catch (error) {
      console.error("Error handling redirect or acquiring token:", error);
      this.isAuthenticated = false;
      this.account = null;
      this.accessToken = null;
      // 可以根据错误类型进行处理，例如重定向到错误页面或触发重新登录
    }
  },

  async acquireAccessTokenSilent(): Promise<string | null> {
    if (!this.msalInstance || !this.account) {
      console.warn("MSAL instance or account not available for silent token acquisition.");
      return null;
    }

    const request = {
      scopes: ["User.Read"], // 替换为您的应用程序所需的 scopes
      account: this.account,
    };

    try {
      const response = await this.msalInstance.acquireTokenSilent(request);
      this.accessToken = response.accessToken;
      console.log("Access Token acquired silently:", this.accessToken);
      return response.accessToken;
    } catch (error) {
      console.error("Silent token acquisition failed:", error);
      // 如果静默获取失败，可能需要尝试弹出窗口或重定向
      // 例如：this.msalInstance.acquireTokenRedirect(request);
      return null;
    }
  },

  async logout() {
    if (this.msalInstance) {
      await this.msalInstance.logoutRedirect();
    }
  }
});

<template>
  <div class="redirect-container">
    <p>正在处理认证，请稍候...</p>
    <div v-if="countdown > 0" class="countdown">您将在 {{ countdown }} 秒后自动跳转。</div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { mystore } from "@/store"; // 假设您的store文件路径
import router from "@/router";

const countdown = ref(5);
let countdownInterval: number | undefined;

onMounted(async () => {
  // 在组件挂载时立即处理重定向
  await mystore.handleRedirectAndAcquireToken();

  if (mystore.isAuthenticated) {
    // 认证成功，开始倒计时并跳转
    countdownInterval = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(countdownInterval);
        router.push({ name: "shop-home-page" }); // 跳转到目标页面
      }
    }, 1000);
  } else {
    // 认证失败或未获取到账户，可以重定向到登录页或错误页
    console.error("Authentication failed on redirect page.");
    // 立即跳转到登录页，或者显示错误信息
    router.push({ name: "login-page" }); 
  }
});

// 在组件卸载时清除计时器，防止内存泄漏
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval);
  }
});
</script>

<style scoped lang="scss">
.redirect-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  color: #333;
}
.countdown {
  margin-top: 20px;
  font-size: 1.2em;
  color: #666;
}
</style>