防止msal-react多次加载组件

Question

我对实现的了解不是很深，而且还没有重构（也不是很好的编码实践）。

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

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

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

accessToken、idToken、oid 也会自动发送到我的 API 进行验证服务器端。
验证后，将根据数据库检查用户...如果存在，发送 JWT...如果不存在，添加它们并发送 JWT。
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);
            });
        });
    }
  }, []);
};

防止msal-react多次加载组件

Prevent msal-react from loading components multiple times

reactjs

msal

msal-react