防止 msal-react 多次加载组件

Question

我对实现的了解并不多，而且它的内容很简单，没有重构（也不是很好的编码实践）。

这是一个管理门户，它使用公司的 Azure Active Directory 来验证用户，而不是用户名/密码等。流程是这样的：

1. 用户导航到/admin。
2. useEffect() 开始检查用户是否为 isAuthenticated。
3. 如果没有，它们会自动重定向到登录。
4. 一旦他们登录或被验证为已经是isAuthenticated，他们现在就可以访问<AuthenticatedTemplate> 的子组件。

当前唯一的子组件是<Token>，出于测试目的，它只是打印出从 API 返回的 JWT 令牌。基本上这里发生的是：

1. accessToken、idToken、oid 也会自动发送到我的 API 以进行服务器端验证。
2. 验证后，会根据数据库检查用户...如果存在，请发送 JWT...如果不存在，请添加并发送 JWT。
3. JWT 保存到sessionStorage，随后用于客户端-API 通信。

我的 API 遇到的问题是被查询四次或更多次：

这是我目前所拥有的：

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './utils/authConfig';

// Instantiate MSAL that encapsulates the entire app
const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// App.tsx

import React, { useEffect } from 'react';
import {
  AuthenticatedTemplate,
  useMsal,
  useAccount,
  useIsAuthenticated,
} from '@azure/msal-react';
import { graphConfig, loginRequest } from '../utils/authConfig';
import { InteractionStatus } from '@azure/msal-browser';
import axios from 'axios';

const Token = (props: any) => {

  if (props.account) {
    props.instance
      .acquireTokenSilent({
        ...loginRequest,
        account: props.account,
      })
      .then((response: any) => {
        axios
          .post('/api/v2/auth/aad_token/validate/', {
            access_token: response.accessToken,
            id_token: response.idToken,
            oid: response.uniqueId,
          })
          .then((response) => {
            console.log(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
      });
  }
  return <div>Test</div>;
};

const App = () => {
  const isAuthenticated = useIsAuthenticated();
  const { instance, inProgress, accounts } = useMsal();
  const account = useAccount(accounts[0] || {});

  useEffect(() => {
    if (inProgress === InteractionStatus.None && !isAuthenticated) {
      instance.loginRedirect(loginRequest);
    }
  });

  return (
    <div className='App'>
      <AuthenticatedTemplate>
        <Token account={account} instance={instance} />
      </AuthenticatedTemplate>
    </div>
  );
};

export default App;

关于如何限制这一点的建议？

Answer 1

这为我修复了它...忘记了依赖数组：

const Token = () => {
  const { accounts, instance } = useMsal();
  const account = useAccount(accounts[0] || {});

  useEffect(() => {
    // Check if account object exists
    if (account) {
      // If it does then acquire an accessToken
      instance
        .acquireTokenSilent({
          ...loginRequest,
          account: account,
        })
        .then((response: any) => {
          axios
            .post('/api/v2/auth/aad_token/validate/', {
              access_token: response.accessToken,
              id_token: response.idToken,
              oid: response.uniqueId,
            })
            .then((response) => {
              console.log(response.data);
            })
            .catch((error) => {
              console.log(error);
            });
        });
    }
  }, []);
};