react-aad-msal调用getAccessToken无法读取缓存，页面反复刷新求助

我之前也碰到过react-aad-msal缓存Token读取失败导致页面循环刷新的问题，结合你的代码和场景，给你梳理几个实用的排查方向：

1. 先确认缓存是否正常存储Token #

打开浏览器开发者工具（F12），切换到Application标签页，找到Local Storage，检查是否存在以msal.<你的clientId>开头的键值对，里面有没有包含accessToken、idToken这类有效内容。同时用jwt-decode解析缓存里的accessToken，看看exp字段对应的过期时间是否已经失效——如果Token过期，MSAL会自动尝试刷新，刷新流程出问题就容易引发跳转循环。

2. 检查getAccessToken()的调用时机 #

你在API请求的authenticateRequest里直接调用getAccessToken()，如果这个函数在组件挂载阶段就被频繁触发（比如useEffect没加正确的依赖项），可能会导致MSAL还没完成初始化就尝试获取Token，进而触发登录跳转。建议先判断用户登录状态再调用：

export const authenticateRequest = async (headers: any) => {
  // 先确认用户已登录
  if (!authProvider.isAuthenticated()) {
    await authProvider.login();
    return { headers };
  }
  const token = await authProvider.getAccessToken();
  console.log(jwt(token.accessToken));
  return {
    headers: {
      ...headers,
      authorization: token.accessToken ? `Bearer ${token.accessToken}` : "",
    }
  }
};

3. 核对重定向URI与刷新页面配置 #

• 你的redirectUri是http://localhost:3000/signin-oidc，要确保这个地址已经在Azure AD应用注册的重定向URI里配置，且类型选的是「SPA」。
• tokenRefreshUri指定的auth.html需要是一个纯静态页面，不能包含React路由逻辑——如果这个页面不存在或者有路由跳转，静默刷新时就会引发循环。可以先尝试移除这个配置，用MSAL默认的静默刷新方式试试。

4. 验证Scopes的一致性 #

你请求的Scopes包含Graph和后端API的权限，要确保登录时获取的Token和调用getAccessToken()时请求的Scopes完全一致。如果Scopes有差异，MSAL会重新发起Token请求，可能触发跳转。建议登录时显式传入这些Scopes：

// 登录时指定完整的Scopes
authProvider.login({ scopes: authenticationParameters.scopes });

5. 确保MSAL实例全局唯一 #

如果你的应用中创建了多个MsalAuthProvider实例，缓存会被相互隔离，自然读不到之前存储的Token。要把authProvider放在单独的文件中导出，确保整个应用都使用同一个实例。

6. 开启MSAL调试日志定位问题 #

给MSAL配置添加日志选项，查看详细的运行日志，能帮你快速定位问题：

const config: any = {
  auth: {
    authority: 'https://login.microsoftonline.com/<tenantID>',
    clientId: '<frontEndClientID>',
    redirectUri: 'http://localhost:3000/signin-oidc'
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: false
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        console.log(message);
      },
      logLevel: 3, // Verbose级别，输出详细日志
      piiLoggingEnabled: false
    }
  }
};

查看控制台的日志信息，看调用getAccessToken()时有没有缓存未命中、Token刷新失败这类错误提示。

你的配置与请求代码参考 #

import jwt from 'jwt-decode'
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
// Msal Configurations
const config: any = {
 auth: {
 authority: 'https://login.microsoftonline.com/<tenantID>',
 clientId: '<frontEndClientID>',
 redirectUri: 'http://localhost:3000/signin-oidc'
 },
 cache: {
 cacheLocation: "localStorage",
 storeAuthStateInCookie: false
 }
};
// Authentication Parameters
const authenticationParameters = {
 scopes: [
 "https://graph.microsoft.com/User.Read",
 "api://<backEndAPIClientID>/Room.ReadWrite"
 ]
}
// Options
const options = {
 loginType: LoginType.Redirect,
 tokenRefreshUri: window.location.origin + '/auth.html'
}
export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)
export const authenticateRequest = async (headers: any) => {
 // Get the authentication token
 const token = await authProvider.getAccessToken();
 console.log(jwt(token.accessToken));
 return {
 headers: {
 ...headers,
 authorization: token.accessToken ? `Bearer ${token.accessToken}` : "",
 }
 }
};

请求代码：

export async function getAllRooms(options: object) {
 let queryOptions = "?";
 Object.entries(options).forEach( ([key, value]) => {
 queryOptions = queryOptions.concat(key).concat("=").concat(value).concat("&");
 });
 return axios.get(endpoint + queryOptions, await authenticateRequest({}))
 .then(response => {
 ...
 })
 .catch(err => {
 throw err
 })
}

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