认证成功后后端返回用户名无法在浏览器显示的排查求助

我帮你排查了代码里的几个关键细节问题，正是这些细节导致用户名无法正常显示：

1. 修复提交按钮的<Link>包裹问题 #

你的提交按钮被<Link to='/wall-of-fame'>包裹，这会导致用户点击提交时优先触发页面跳转，直接中断表单的提交逻辑（即使偶尔请求能完成，跳转时机也完全不对）。把<Link>去掉，让提交逻辑完成后再处理跳转：

// Login组件render里的提交部分修改为：
<div className="form-group">
  <input type="submit" name="submit" className="btn btn-info btn-md" value="Submit"/>
</div>

2. 正确传递并获取用户名到Wall组件 #

你在Login的Redirect里把用户名放在了路由state中，但Wall组件直接用this.props.name是拿不到的，需要从路由的location.state里读取，同时要处理state不存在的边界情况：

方式一：保留Redirect逻辑（推荐） #

修改Login组件的handleSubmit，去掉冗余的history.push，让Redirect在auth状态更新后触发跳转：

// Login组件的handleSubmit修改：
axios.post('http://127.0.0.1:8000/api/auth/login', user, {headers})
  .then(response => {
    console.log(response.data[0].name);
    console.log(response.data.access_token);
    // 直接设置cookie，无需存到state
    Cookies.set("access_token", response.data.access_token);
    this.setState({
      logged_in_flag: true,
      name: response.data[0].name,
      auth: true // 更新auth状态触发Redirect
    });
  }).catch(error => {
    console.log("AXIOS ERROR!! " + error);
  });

然后修改Wall组件，从location.state获取用户名：

// Wall组件修改：
class Wall extends Component {
  render() {
    // 从路由state取用户名，兜底显示Guest
    const name = this.props.location.state?.name || 'Guest';
    return(
      <h1>Hello, {name}!</h1>
    );
  }
}

export default withRouter(Wall);

方式二：用history.push直接传递state #

如果不想用Redirect，也可以在handleSubmit里直接跳转并携带state：

// Login组件的handleSubmit修改：
axios.post(...)
  .then(response => {
    Cookies.set("access_token", response.data.access_token);
    // 直接跳转并传递用户名
    history.push({
      pathname: '/wall-of-fame',
      state: { name: response.data[0].name }
    });
  })

这种方式可以直接去掉Login组件里的auth状态和Redirect逻辑。

3. 修复Cookies设置的冗余代码 #

Login组件handleSubmit里的这两行代码完全多余，而且会因为setState异步导致错误：

let set_access_token = Cookies.set("access_token", response.data.access_token);
// ...
Cookies.set("access_token", this.state.access_token);

直接简化为：

Cookies.set("access_token", response.data.access_token);

Cookies.set已经直接完成了cookie设置，不需要存到state再重复操作。

4. 可选：处理直接访问Wall页面的情况 #

如果用户直接输入/wall-of-fame地址，此时location.state会是undefined，你可以在Wall组件里做跳转兜底：

componentDidMount() {
  if (!this.props.location.state?.name) {
    // 没有用户名时跳转到登录页
    this.props.history.push('/login');
  }
}

总结 #

核心问题就是提交按钮的Link包裹导致跳转时机错误，以及Wall组件没有正确读取路由传递的state。按照上面的步骤修改后，用户名应该能正常显示了。

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