Entra OIDC配置中使用localStorage时公司邮箱字段为undefined的问题

我太懂你这种卡壳的感觉了——明明用sessionStorage的时候能正常拿到公司邮箱，换成localStorage想让用户不用反复登录，结果邮箱字段直接成了undefined，对着代码翻来覆去就是找不到问题，确实闹心。

结合你贴的代码和遇到的场景，我给你梳理几个大概率的原因和对应的解决步骤，你可以一步步排查：

首先，先排除旧缓存的干扰 #

当你从sessionStorage切换到localStorage时，MSAL不会自动帮你迁移旧的缓存数据，浏览器里的sessionStorage可能还留着之前的登录信息，新旧缓存混在一起很容易导致MSAL读取到不完整的用户数据。

• 先打开浏览器开发者工具，找到Application（或存储）标签，手动清空sessionStorage和localStorage里所有和msal相关的条目，然后完全关闭浏览器再重新打开，重新登录测试看看。

检查localStorage里的idToken是否真的包含email字段 #

有时候问题根本不在你的代码，而是MSAL存在localStorage里的idToken本身就没有email声明。你可以这么排查：

1. 登录成功后，打开开发者工具的Application标签，找到localStorage，找到以msal.<你的clientId>.idtoken开头的缓存条目。
2. 把这个条目的值复制出来，用base64解码（浏览器里可以用atob()函数在控制台解码），看看解码后的JSON里有没有email字段。
   • 如果没有，那说明Entra ID返回的idToken里就没带email，这时候要去你的Entra应用注册里检查：
     • 确保在“API权限”里添加了Microsoft Graph的User.Read权限，并且已经完成管理员同意（如果是企业租户应用）。
     • 去“令牌配置”页面，确认已经添加了email声明，或者确保idToken默认包含用户的邮箱信息。

确保登录请求请求了正确的权限范围 #

虽然你用sessionStorage能拿到email，但切换缓存位置后，可能默认的登录范围不够，导致新的idToken里没带email。你可以在登录的时候明确指定scopes：
比如在调用loginPopup或者loginRedirect的时候，加上scopes配置：

// 举个例子，在你的登录组件里
import { useMsal } from '@azure/msal-vue'

const { instance } = useMsal()
const login = async () => {
  await instance.loginPopup({
    scopes: ['openid', 'profile', 'email'] // 明确请求email范围
  })
}

这能确保MSAL请求的令牌里包含邮箱相关的声明。

优化你的User Store，增加调试和容错 #

你现在的companyEmail计算属性可以加个调试日志，看看实际拿到的idTokenClaims是什么，同时兼容一下可能的字段名（比如Entra ID有时候会返回upn而不是email）：

const companyEmail = computed(() => {
  if(!user.value) return null
  // 临时加日志，看看实际的claims结构
  console.log('当前idTokenClaims:', user.value.idTokenClaims)
  // 同时兼容email和upn字段
  return (user.value.idTokenClaims as any)?.email || (user.value.idTokenClaims as any)?.upn || null
})

这样你能清楚看到缓存里的用户数据到底有什么，不会瞎猜。

确保登录后正确更新User Store #

有时候问题出在登录成功后，没有及时把最新的用户数据同步到Pinia store里。你要确保在MSAL的登录回调里，把最新的AccountInfo传给updateUser：
比如在App.vue的初始化逻辑里：

import { useMsal } from '@azure/msal-vue'
import { useUserStore } from './stores/user'
import { onMounted } from 'vue'

onMounted(async () => {
  const { instance } = useMsal()
  const userStore = useUserStore()
  // 处理重定向登录的回调
  const response = await instance.handleRedirectPromise()
  if (response?.account) {
    // 把最新的account信息更新到store
    userStore.updateUser(response.account)
  } else {
    // 检查是否有已登录的账户
    const accounts = instance.getAllAccounts()
    if (accounts.length > 0) {
      userStore.updateUser(accounts[0])
    }
  }
})

这样能保证store里的user数据是MSAL从localStorage里读取的最新数据，而不是旧的不完整数据。

你可以按照这个顺序一步步排查，应该能找到问题所在。

内容来源于stack exchange