MSAL中acquireTokenSilent始终生成新Access Token的问题求助

大家好，我最近在做MSAL.js集成的时候碰到了个头疼的问题：每次刷新页面，acquireTokenSilent都会重新生成一个新的access token，完全没有复用MSAL的缓存。我本来想把token存在localStorage里供fetch工具调用，但现在每次刷新都拿新token，后端那边每次请求的token都不一样，这显然不符合预期。

下面是我的相关代码，麻烦各位帮忙看看哪里出问题了：

route.tsx 文件 #

export const msalInstance = new PublicClientApplication(msalConfig);
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
  msalInstance.setActiveAccount(accounts[0]);
}

msalInstance.addEventCallback((event: EventMessage) => {
  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
    const payload = event.payload as AuthenticationResult;
    const account = payload.account;
    msalInstance.setActiveAccount(account);
  }
});

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App pca={msalInstance} />,
    children: [
      { path: '/', element: <Home /> },
    ],
  },
]);

App.tsx 文件 #

function App({ pca }: AppProps) {
  const authRequest = {
    ...loginRequest,
  };

  return (
    <MsalProvider instance={pca}>
      <MsalAuthenticationTemplate
        interactionType={InteractionType.Redirect}
        authenticationRequest={authRequest}
        errorComponent={Error}
        loadingComponent={Loading}
      >
        <OutletWrapper />
      </MsalAuthenticationTemplate>
    </MsalProvider>
  );
}

const OutletWrapper: React.FC = () => {
  const { instance } = useMsal();
  const account = useAccount(accounts[0] || {});
  const [apiData, setApiData] = useState<AuthenticationResult | null>(null);

  useEffect(() => {
    if (account) {
      instance
        .acquireTokenSilent({
          scopes: ['User.Read'],
          account: account,
        })
        .then((response) => {
          if (response) {
            localStorage.setItem('authStatus', response.idToken);
            setApiData(response);
          }
        });
    }
  }, [account, instance]);

  if (!apiData) return <Loading />;

  return (
    <CompanySelectionWrapper>
      <Sidebar />
      <Outlet />
    </CompanySelectionWrapper>
  );
};

export default App;

fetch.js 文件 #

export default async function fetchUrl(url: string, options: optionsProps) {
  let jwtToken = localStorage.getItem('authStatus');
  authAddedOptions.headers = {
    ...authAddedOptions.headers,
    Authorization: `Bearer ${jwtToken}`,
  };
  return fetch(url, authAddedOptions).then(handleHTTPErrors);
}

我怀疑是不是在获取account或者调用acquireTokenSilent的方式上有问题？或者MSAL实例的初始化哪里没配置对，导致它没法正确读取缓存的token？麻烦各位大佬帮忙排查一下，谢谢了！

内容来源于stack exchange