React.js中携带Token跳转页面及调用用户详情API问题求助

嘿，我看你在Login组件里自定义的navigatetopolls方法没生效，没法带着Token跳转到用户详情页并调用指定API对吧？我来帮你一步步搞定这个问题：

首先，解决路由跳转的核心问题 #

你的类组件没拿到路由的history对象，肯定没法正常跳转！React Router类组件需要用withRouter高阶组件包裹，才能获取路由相关的props。

第一步：修改Login组件的路由绑定

先导入withRouter，然后包裹你的Login组件：

import React, { Component } from 'react';
import axios from 'axios';
// 导入withRouter
import { withRouter } from 'react-router-dom';

class Login extends Component {
  constructor(){
    super();
    this.state = {
      username: '',
      password: '',
    };
    // 如果不用箭头函数定义方法，这里要手动绑定this
    // this.navigatetopolls = this.navigatetopolls.bind(this);
  }

  // 用箭头函数定义方法，自动绑定this，无需手动处理
  navigatetopolls = (token) => {
    // 将Token存入localStorage，后续页面可直接获取
    localStorage.setItem('authToken', token);
    // 跳转到用户详情页，路径可根据你的实际需求修改
    this.props.history.push('/user-details');
  }

  // 新增登录处理方法，调用登录接口后触发跳转
  handleLogin = async (e) => {
    e.preventDefault();
    try {
      // 替换为你的实际登录API地址
      const loginRes = await axios.post('/api/login', {
        username: this.state.username,
        password: this.state.password
      });
      // 假设登录接口返回的token在response.data中
      const token = loginRes.data.token;
      // 调用跳转方法并传入token
      this.navigatetopolls(token);
    } catch (err) {
      console.error('登录失败:', err);
      alert('用户名或密码错误');
    }
  }

  render() {
    return (
      <form onSubmit={this.handleLogin}>
        <input
          type="text"
          value={this.state.username}
          onChange={(e) => this.setState({username: e.target.value})}
          placeholder="用户名"
        />
        <input
          type="password"
          value={this.state.password}
          onChange={(e) => this.setState({password: e.target.value})}
          placeholder="密码"
        />
        <button type="submit">登录</button>
      </form>
    );
  }
}

// 用withRouter包裹组件后导出
export default withRouter(Login);

然后，创建用户详情页并调用指定API #

新建一个UserDetails.js组件，在这里调用你指定的http://localhost:8000/api/polls/1接口，同时携带Token：

import React, { Component } from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

class UserDetails extends Component {
  state = {
    pollData: null,
    loadError: ''
  };

  // 组件挂载后立即调用API
  componentDidMount() {
    this.fetchPollData();
  }

  fetchPollData = async () => {
    // 从localStorage取出之前存储的Token
    const token = localStorage.getItem('authToken');
    
    // 如果没有Token，直接跳回登录页
    if (!token) {
      this.props.history.push('/login');
      return;
    }

    try {
      const res = await axios.get('http://localhost:8000/api/polls/1', {
        // 在请求头中携带Token，供后端验证身份
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      // 将获取到的数据存入state
      this.setState({ pollData: res.data });
    } catch (err) {
      this.setState({ loadError: '获取数据失败，请稍后重试' });
      console.error('API请求出错:', err);
    }
  }

  render() {
    const { pollData, loadError } = this.state;

    if (loadError) {
      return <div className="error">{loadError}</div>;
    }

    if (!pollData) {
      return <div>加载中...</div>;
    }

    return (
      <div className="user-details">
        <h2>登录用户详情与Poll数据</h2>
        {/* 可根据实际数据结构渲染内容，下面为示例 */}
        <div>
          <h3>Poll信息:</h3>
          <pre>{JSON.stringify(pollData, null, 2)}</pre>
        </div>
      </div>
    );
  }
}

export default withRouter(UserDetails);

最后，配置路由规则 #

在根组件（比如App.js）中配置路由，确保两个组件能正常访问：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './Login';
import UserDetails from './UserDetails';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/user-details" component={UserDetails} />
        {/* 默认路由跳转到登录页 */}
        <Route path="/" exact component={Login} />
      </Switch>
    </Router>
  );
}

export default App;

常见问题排查 #

1. 自定义方法没生效？

   • 检查方法是否正确绑定this：要么用箭头函数定义方法，要么在constructor中手动绑定
   • 确认组件已用withRouter包裹，成功拿到history对象

2. API请求失败？

   • 检查Token是否正确存入localStorage
   • 确认请求头格式符合后端要求（部分后端可能用token而非Authorization: Bearer xxx）
   • 检查后端是否配置了跨域允许（前后端端口不同时，需后端开启CORS）

内容的提问来源于stack exchange，提问作者krishna krish