Vue2中azure-msal-browser登录正常但获取Token报初始化错误

问题描述 #

我正尝试在Vue2应用中使用azure-msal-browser包实现登录功能，规划如下：

• 创建独立服务封装login和getBearerToken方法；
• 在Vue实例的beforeCreate()中初始化该服务，确保登录后才可访问页面；
• getToken方法可在项目任意.ts文件中调用，用于在请求中附加Token。

目前登录功能正常，可正常跳转至凭证输入页面，但调用getToken()时控制台报错：BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API。

相关代码 #

Msal服务代码

import { msalConfig, useAuthStore } from '@/stores/auth'
import { PublicClientApplication } from '@azure/msal-browser'

class MsalService {
  msalInstance: PublicClientApplication

  constructor() {
    this.msalInstance = new PublicClientApplication(msalConfig)
    this.initialize()
  }

  async initialize() {
    try {
      await this.msalInstance.initialize()
    } catch (error) {
      console.log('Initialization error', error)
    }
  }

  login() {
    const authStore = useAuthStore()

    this.msalInstance
      .handleRedirectPromise()
      .then((response: any) => {
        if (!response) {
          this.msalInstance.loginRedirect()
        } else {
          authStore.setUser(response.account)
        }
      })
      .catch((error: any) => {
        console.error('Failed to handle redirect:', error)
      })
  }


  async getToken(): Promise<any> {
    try {
      const accounts = this.msalInstance.getAllAccounts()
      if (accounts.length === 0) {
        throw new Error('No accounts found. Please login first.')
      }
      const silentRequest = {
        scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
        account: accounts[0]
      }
      const silentResponse = await this.msalInstance.acquireTokenSilent(silentRequest)
      return silentResponse.accessToken
    } catch (error) {
      console.error('Token acquisition error:', error)
      throw error
    }
  }
}

export const msalService = new MsalService()

main.ts代码

import { msalService } from "@/stores/auth"

export const instance = new Vue({
  router,
  ...
  beforeCreate() {

    msalService.initialize().then(() => {
      msalService.login()
    })

  }
}

console.log(await msalService.getToken())

核心问题：初始化未完成就调用getToken #

1. 构造函数异步调用未等待：
   MsalService构造函数中直接调用this.initialize()，但initialize是异步方法，构造函数无法等待其完成。导致msalService实例创建后，msalInstance可能还处于未初始化状态，此时调用getToken必然触发错误。

2. main.ts中调用时机过早：
   console.log(await msalService.getToken())直接在Vue实例外部执行，此时MSAL的初始化流程还未走完，完全不符合初始化完成后才能调用API的要求。

解决步骤 #

步骤1：给MsalService添加初始化状态控制 #

修改服务代码，记录初始化状态，确保只有初始化完成后才允许调用其他方法：

class MsalService {
  msalInstance: PublicClientApplication
  private initialized = false

  constructor() {
    this.msalInstance = new PublicClientApplication(msalConfig)
    // 构造函数不再自动调用initialize，改为外部主动触发
  }

  async initialize() {
    if (this.initialized) return
    try {
      await this.msalInstance.initialize()
      this.initialized = true
    } catch (error) {
      console.log('Initialization error', error)
      throw error
    }
  }

  async getToken(): Promise<any> {
    if (!this.initialized) {
      throw new Error('MsalService not initialized. Call initialize() first and await it.')
    }
    // 原getToken逻辑保留
    try {
      const accounts = this.msalInstance.getAllAccounts()
      if (accounts.length === 0) {
        throw new Error('No accounts found. Please login first.')
      }
      const silentRequest = {
        scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
        account: accounts[0]
      }
      const silentResponse = await this.msalInstance.acquireTokenSilent(silentRequest)
      return silentResponse.accessToken
    } catch (error) {
      console.error('Token acquisition error:', error)
      throw error
    }
  }
}

步骤2：调整main.ts中的调用时机 #

将getToken的调用移至初始化完成后的生命周期钩子中，避免过早调用：

import { msalService } from "@/stores/auth"

export const instance = new Vue({
  router,
  ...
  async beforeCreate() {
    await msalService.initialize()
    await msalService.login()
  },
  async mounted() {
    try {
      const token = await msalService.getToken()
      console.log(token)
    } catch (err) {
      console.error(err)
    }
  }
})

步骤3：优化login方法的异步逻辑 #

将.then链式调用改为async/await，提升代码可读性和流程可控性：

async login() {
  const authStore = useAuthStore()
  try {
    const response = await this.msalInstance.handleRedirectPromise()
    if (!response) {
      await this.msalInstance.loginRedirect()
    } else {
      authStore.setUser(response.account)
    }
  } catch (error) {
    console.error('Failed to handle redirect:', error)
  }
}

额外注意事项 #

• 任何调用msalInstance的API前，必须确保已经等待initialize()完成；
• 在其他业务.ts文件中调用getToken时，需先确认msalService已完成初始化，可通过全局初始化流程保证；
• 可将MSAL初始化封装为应用启动前的前置异步操作，确保整个应用在MSAL准备就绪后再加载业务代码。

内容的提问来源于stack exchange，提问作者J-H