浏览器刷新后如何为Microsoft Graph API保持用户登录状态？

1 调整MSAL.js缓存配置 #

刷新后会话失效的核心原因大多是默认MSAL.js配置使用了sessionStorage存储身份凭证，该存储会在页面刷新、关闭后自动清空。直接修改配置将缓存位置改为永久本地存储即可：

const msalConfig = {
  auth: {
    clientId: "你的Azure应用客户端ID",
    authority: "https://login.microsoftonline.com/common",
    redirectUri: "你的应用重定向地址"
  },
  cache: {
    // 核心配置：将默认sessionStorage改为localStorage
    cacheLocation: "localStorage",
    // 可选：兼容不支持本地存储的旧版浏览器
    storeAuthStateInCookie: true
  }
}

修改后MSAL会自动将id令牌、访问令牌、刷新令牌持久化存在本地存储，刷新页面时会优先读取本地有效凭证。

2 新增页面初始化静默登录逻辑 #

为了避免令牌过期导致的登录失效，页面加载完成后先执行静默校验逻辑，只有静默获取凭证失败时才触发用户手动登录：

// 页面初始化时优先调用该方法
async function initUserSession() {
  const accountList = msalInstance.getAllAccounts();
  // 本地存在已登录账号信息
  if (accountList.length > 0) {
    try {
      // 静默获取有效访问令牌，过期时会自动用刷新令牌换发新令牌
      const tokenRes = await msalInstance.acquireTokenSilent({
        scopes: ["User.Read", "Calendars.ReadWrite"], // 替换为你实际用到的Graph权限列表
        account: accountList[0]
      });
      // 拿到有效令牌后直接初始化业务逻辑
      initBusinessLogic(tokenRes.accessToken);
    } catch (err) {
      // 仅当静默获取失败、需要用户交互时才触发登录流程
      if (err.name === "InteractionRequiredAuthError") {
        msalInstance.loginRedirect({
          scopes: ["User.Read", "Calendars.ReadWrite"]
        });
      }
    }
  } else {
    // 本地无账号信息才触发首次登录
    msalInstance.loginRedirect({
      scopes: ["User.Read", "Calendars.ReadWrite"]
    });
  }
}

3 校验Azure应用注册配置 #

需要确认你在Azure门户的应用注册配置符合要求，否则无法获取刷新令牌实现持久登录：

• 重定向URI的类型必须选择单页应用(SPA)，不能错误选择Web类型
• 令牌配置页已开启ID令牌、访问令牌的颁发选项
• 你用到的所有Graph权限已完成申请，需要管理员同意的权限需先完成管理员同意流程

内容的提问来源于stack exchange，提问作者Houy Narun