Meteor React：页面初始化时User对象未定义的权限控制问题

嘿，这个问题我之前也踩过坑！Meteor启动时客户端和服务端的登录状态是异步同步的，所以一开始Meteor.user()会是undefined，这时候直接判断未登录重定向肯定会出问题——毕竟可能只是还没加载完，不是真的没登录。

下面给你说具体的解决办法：

核心判断逻辑：结合Meteor.loggingIn() #

Meteor提供了一个专门的方法Meteor.loggingIn()，它会在客户端正在获取登录状态的时候返回true，等登录状态完全同步完成后返回false。我们可以把这个状态和Meteor.user()结合起来，就能准确判断用户的登录状态了。

第一步：在WithTracker里传递登录状态 #

修改你的WithTracker代码，把isLoggingIn和user一起传给Profile组件：

export default WithTracker(() => {
  const isLoggingIn = Meteor.loggingIn();
  const user = Meteor.user();
  return {
    isLoggingIn,
    user,
  };
})(Profile);

第二步：在render方法里分情况处理 #

在Profile组件的render方法里，按照三个状态分支处理：

render() {
  const { isLoggingIn, user } = this.props;

  // 1. 登录状态还在加载中：显示加载提示（避免闪屏或者误重定向）
  if (isLoggingIn) {
    return <div>正在验证身份...</div>;
  }

  // 2. 登录状态加载完成，且确实未登录：重定向到登录页
  if (!user) {
    return <Redirect to="/login" />;
  }

  // 3. 已登录：渲染个人资料内容
  return (
    <div className="profile-container">
      <h2>我的个人资料</h2>
      <p>用户名：{user.username}</p>
      {/* 其他资料内容 */}
    </div>
  );
}

什么时候能确定用户未登录？ #

只有当Meteor.loggingIn()返回false，并且Meteor.user()返回null的时候，才能100%确定用户未登录。这时候客户端已经完成了登录状态的同步，不会再出现“以为未登录但其实是还没加载完”的情况。

别忘记哦，一开始的undefined只是加载中的临时状态，不是未登录的标志～

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