Meteor + React 用户登录事件/回调及页面重定向技术问询

嘿，这个需求很常见，Meteor和React Router结合起来有几种可靠的方式实现登录后重定向，我帮你梳理下：

1. 利用Meteor的Tracker.autorun监听登录状态（推荐） #

Meteor的Tracker可以自动追踪响应式数据源的变化，Meteor.userId()就是一个响应式变量，当用户登录/登出时它会自动更新。你可以在组件的生命周期里设置这个监听，这样不管是通过登录表单登录，还是自动登录（比如刷新页面后恢复登录状态），都能正确触发重定向。

2. 在loginWithPassword的回调里处理状态更新 #

Meteor.loginWithPassword是异步操作，你原来的代码里在调用它之后直接判断Meteor.userId()是不可靠的，因为此时登录请求可能还没完成，必须在它的回调函数里处理登录成功后的逻辑。

修正后的完整代码 #

先帮你把代码里的几个小错误修正了（比如ref的写法错误、组件导出名称不匹配），再加上重定向的逻辑：

import React from 'react';
import { Link, Redirect } from 'react-router-dom';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import './LogInPage.less';

class LogIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      loggedIn: !!Meteor.userId(), // 简化登录状态判断
    };
    this.login = this.login.bind(this);
    this.autorun = null; // 保存autorun引用，方便组件卸载时销毁
  }

  componentDidMount() {
    // 设置Tracker监听登录状态变化
    this.autorun = Tracker.autorun(() => {
      const isLoggedIn = !!Meteor.userId();
      if (isLoggedIn !== this.state.loggedIn) {
        this.setState({ loggedIn: isLoggedIn });
      }
    });
  }

  componentWillUnmount() {
    // 组件卸载时销毁autorun，避免内存泄漏
    if (this.autorun) {
      this.autorun.stop();
    }
  }

  login = (e) => {
    e.preventDefault();
    // 清空之前的错误信息
    this.setState({ error: false });
    
    Meteor.loginWithPassword(this.email.value, this.password.value, (err) => {
      if (err) {
        this.setState({ error: err.reason });
      }
      // 登录成功后无需手动更新state，Tracker会自动同步状态
    });
  };

  render() {
    // 如果已登录，直接重定向到首页
    if (this.state.loggedIn) {
      return <Redirect to="/" />;
    }

    return (
      <div className="LogIn">
        <form onSubmit={this.login}>
          <label>Email</label>
          <input 
            type="email" 
            ref={(input) => (this.email = input)} 
            placeholder="请输入邮箱"
          />
          
          <label>Password</label>
          <input 
            type="password" 
            ref={(input) => (this.password = input)} 
            placeholder="请输入密码"
          />
          
          <button className="btn" type="submit">
            Log in
          </button>
          
          {this.state.error && (
            <p className="form-std__msg form-std__msg--err">
              {this.state.error}
            </p>
          )}
        </form>
      </div>
    );
  }
}

export default LogIn; // 修正导出名称，与组件类名保持一致

关键说明 #

• Tracker.autorun：这个监听会在组件挂载后启动，每次Meteor.userId()变化时自动更新state，确保登录状态的实时同步。记得在组件卸载时销毁它，避免内存泄漏。
• 异步登录回调：loginWithPassword的回调是登录结果的可靠来源，这里只处理错误信息，登录成功的状态更新交给Tracker处理，逻辑更统一。
• Redirect组件：在render里判断loggedIn状态，一旦为true就返回<Redirect>组件，React Router会自动跳转到指定路径。

这样不管是通过表单登录，还是页面刷新后自动恢复登录状态，都能正确触发重定向啦！

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