使用react-aad-msal在令牌过期后重定向身份验证循环

npm install react-aad-msal

import { MsalAuthProvider, LoginType } from 'react-aad-msal';

const config = {
  auth: {
    authority: '<AAD_AUTHORITY>',
    clientId: '<AAD_CLIENT_ID>',
    redirectUri: '<REDIRECT_URI>',
  },
  cache: {
    cacheLocation: 'localStorage',
  },
};

const authenticationParameters = {
  scopes: [
    '<SCOPE_1>',
    '<SCOPE_2>',
    // 添加其他所需的权限范围
  ],
};

export const authProvider = new MsalAuthProvider(config, authenticationParameters, LoginType.Redirect);

import { Provider } from 'react-redux';
import { MsalProvider } from '@azure/msal-react';
import { authProvider } from './authProvider';

ReactDOM.render(
  <Provider store={store}>
    <MsalProvider instance={authProvider}>
      <App />
    </MsalProvider>
  </Provider>,
  document.getElementById('root')
);

import { AuthenticationProvider, withMsal } from '@azure/msal-react';
import { authProvider } from './authProvider';

const ProtectedComponent = (props) => {
  // 在这里可以使用props.msal对象访问用户信息和令牌

  return (
    // 渲染受保护的组件内容
  );
};

export default withMsal(ProtectedComponent);

// 在另一个文件中引入受保护的组件
import ProtectedComponent from './ProtectedComponent';

const App = () => {
  return (
    <AuthenticationProvider>
      <ProtectedComponent />
    </AuthenticationProvider>
  );
};