如何在React项目中跨JS文件导出并获取登录接口的result数据？

方案1：使用React Context（全局状态共享） #

适合多组件/跨文件共享登录用户数据的场景，步骤如下：

1. 创建AuthContext.js文件：

import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [userData, setUserData] = useState(null);

  return (
    <AuthContext.Provider value={{ userData, setUserData }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

2. 在项目入口文件（如index.js）中用AuthProvider包裹根组件：

import { AuthProvider } from './AuthContext';
import App from './App';

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);

3. 修改Login组件，将登录数据存入Context：

import React from "react";
import axios from "axios";
import { AuthContext } from './AuthContext';

class Login extends React.Component{
  static contextType = AuthContext;

  handleLogin = async (event) => {
    event.preventDefault();
    
    let payload = {
      "params":{"db":"dev02","login":event.target.email.value, "password":event.target.password.value}
    }
    try{
      let result = await axios.post('http://dev02.abcltd.net:8020/mobile/session/authenticate', payload);
      if (result.data.result.message.toLowerCase() === 'success') {
        // 存入用户数据到Context
        this.context.setUserData(result.data.result);
        window.open('/Timesheets','_self');
      }
    } catch(err){
      alert('Invalid Email or Password')
    }
  }

  render(){
    return (
      <div className="container">
        <div className="row ces-login-bg">
          <div className="col-md-12 col-lg-6 login-intro-container">
            <img alt = "" className="ces-logo" src="https://www.cesltd.com/img/ces-logo.png"/>
            <h1 className="timesheet-head">Timesheets</h1>
            <p className="intro-text">a comprehensive solution for your timesheets, holidays and leaves</p>
          </div>
          <div className="col-md-12 col-lg-6 ">
            <form className="form-container" onSubmit={this.handleLogin}>
              <h1 className="login-heading">Login</h1>
              <div className="email-label ">
                <label className="label-element">Email</label>
                <input className="input-element" type ="email" id = 'email' name="email" required/>
              </div>
              <div className="password-label ">
                <label className="label-element">Password</label>
                <input className="input-element" type="password" id = "password" name="password" required/>
              </div>
              <button type ="submit" className="button-container" >
                <p className="login-button">Login</p>
              </button>
            </form>
          </div>
        </div>
      </div>
    )
  }
}

export default Login

4. 在其他文件中读取数据：

import { useAuth } from './AuthContext';

function Timesheets() {
  const { userData } = useAuth();
  
  if (!userData) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      <h2>欢迎，{userData.name}</h2>
      <p>年龄：{userData.age}</p>
    </div>
  );
}

方案2：使用本地存储（localStorage/sessionStorage） #

适合需要持久化保存数据，页面刷新后仍可获取的场景，直接修改handleLogin函数：

async function handleLogin(event){
  event.preventDefault();
  
  let payload = {
    "params":{"db":"dev02","login":event.target.email.value, "password":event.target.password.value}
  }
  try{
    let result = await axios.post('http://dev02.abcltd.net:8020/mobile/session/authenticate', payload);
    if (result.data.result.message.toLowerCase() === 'success') {
      // 将用户数据存入localStorage
      localStorage.setItem('userData', JSON.stringify(result.data.result));
      window.open('/Timesheets','_self');
    }
  } catch(err){
    alert('Invalid Email or Password')
  }
}

在其他文件中读取：

// 获取并解析用户数据
const userData = JSON.parse(localStorage.getItem('userData'));

if (userData) {
  console.log('用户名：', userData.name);
  console.log('年龄：', userData.age);
}

注：localStorage会持久保存至手动清除；sessionStorage仅在当前浏览器会话有效，关闭即消失。

方案3：提升状态到父组件 #

如果Login有父组件，可将用户状态放在父组件，通过props传递回调：

1. 父组件示例：

import React, { useState } from 'react';
import Login from './Login';
import Timesheets from './Timesheets';

function App() {
  const [userData, setUserData] = useState(null);

  const handleLoginSuccess = (data) => {
    setUserData(data);
  }

  return (
    <div>
      {!userData ? <Login onLoginSuccess={handleLoginSuccess} /> : <Timesheets userData={userData} />}
    </div>
  );
}

2. 修改Login组件调用父组件回调：

class Login extends React.Component{
  handleLogin = async (event) => {
    event.preventDefault();
    
    let payload = {
      "params":{"db":"dev02","login":event.target.email.value, "password":event.target.password.value}
    }
    try{
      let result = await axios.post('http://dev02.abcltd.net:8020/mobile/session/authenticate', payload);
      if (result.data.result.message.toLowerCase() === 'success') {
        this.props.onLoginSuccess(result.data.result);
        window.open('/Timesheets','_self');
      }
    } catch(err){
      alert('Invalid Email or Password')
    }
  }

  // render内容保持不变，仅将onSubmit改为this.handleLogin
}

3. 在Timesheets组件通过props获取数据：

function Timesheets({ userData }) {
  return (
    <div>
      <h2>欢迎，{userData.name}</h2>
      <p>年龄：{userData.age}</p>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者BARE BEAR