Запретить msal-react загружать компоненты несколько раз

Question

Я не слишком углубляюсь в реализацию, и она довольно медленная и не подвергалась рефакторингу (и не очень хороша в практике кодирования).

Это портал администратора, который использует Azure Active Directory компании для проверки пользователей, а не имя пользователя / пароль и т. Д. Последовательность действий такова:

1. Пользователь переходит к /admin.
2. useEffect() начинает проверять, есть ли user.
3. В противном случае они автоматически перенаправляются для входа в систему.
4. После того, как они вошли в систему или были проверены как уже зарегистрированные isAuthenticated, теперь они могут получить доступ к компонентам, которые являются дочерними для <AuthenticatedTemplate>.

Единственный дочерний компонент в настоящее время <Token>, который в целях тестирования просто распечатывает токен JWT, возвращенный из API. По сути, здесь происходит следующее:

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);
            });
        });
    }
  }, []);
};