如何在React路由器中处理来自外部身份验证应用程序post响应

npm install react-router-dom

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import axios from 'axios';

const ExternalAuthCallback = () => {
  const history = useHistory();

  useEffect(() => {
    const handleCallbackResponse = async () => {
      try {
        // 获取回调响应数据
        const response = await axios.post('/external-auth-callback', {
          // 在这里添加回调响应数据，例如身份验证令牌等
        });

        // 根据响应结果进行相应的操作
        if (response.data.success) {
          // 验证成功，将用户信息存储到本地存储或全局状态中
          // 例如：localStorage.setItem('user', JSON.stringify(response.data.user));

          // 重定向到应用程序的主页
          history.push('/');
        } else {
          // 验证失败，显示错误消息或重定向到登录页面
          // 例如：history.push('/login');
        }
      } catch (error) {
        // 处理错误情况
        console.error('Error:', error);
      }
    };

    handleCallbackResponse();
  }, [history]);

  return (
    <div>
      <h1>处理外部身份验证应用程序的POST响应</h1>
      <p>正在处理身份验证，请稍候...</p>
    </div>
  );
};

export default ExternalAuthCallback;