React-add- getAccessToken无法从缓存加载

Question

我正在尝试使用react-aad-msal。一切运行正常(我可以从Azure中获取令牌)，直到我尝试从缓存中获取它。当我使用getAccessToken()方法时，页面一次又一次地重新加载。msal似乎无法从缓存中加载令牌。我尝试了这些解决方案(Application does not fetch access token from cache using MSAL (react-aad-msal))，但它不起作用。你有什么想法吗？

下面是我的配置：

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
    })
}

Answer 1

我终于设法让它工作起来了。在我的authProvider.getAccessToken()中，我从两个不同的API请求两个作用域，似乎AzureAD不喜欢这样。我已经移除了一个，瞧。

我仍然想知道为什么。也许是Azure中某个地方的配置错误。