firebase.auth().currentUser 在页面刷新时返回 null

Question

我添加了您提到的功能，但是当我登录时显示此错误：

TypeError: Cannot set property 'photo' of undefined
    at feed.page.ts:32
    at auth.esm.js:326
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at resolvePromise (zone.js:831)
    at zone.js:896
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502)
    at ZoneTask.invoke (zone.js:487)
    at timer (zone.js:2281)

如果我刷新它显示的页面：

 getEvents() is not a function 

我所做的更改仍然出现错误。这很奇怪，因为当我登录并重定向脚趾 FeedPage 时，我得到未定义的错误照片，如果我刷新我得到 getEvents() 不是 e 函数。刷新后，feed.html 中的照片变量为空，无法绑定到ngModel 并在头像中显示照片。

events: any[] = [];
  likes: any[] = [];
  pageSize = 10;
  cursor: any; // can be declared as DocumentSnapshot
  infiniteEvent: any;
  state: any;
  private photo = '';

  // tslint:disable-next-line: max-line-length
  constructor(public navCtrl: NavController, private loadingCtrl: LoadingController, private toastCtrl: ToastController, private http: HttpClient, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public modalCtrl: ModalController, public popoverCtrl: PopoverController) {

    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        this.photo = user.photoURL;
        this.getEvents();
      } else {
        console.log('Not authenticated');
        // No user is signed in.
      }
    });
  }


  public async getEvents() {
    const loading = await this.loadingCtrl.create({
      message: 'Loading events...'
    });

    loading.present();
    const query = firebase.firestore().collection('events').orderBy('created', 'desc').limit(this.pageSize);

    query.onSnapshot((snapshot) => {
      const changedDocs = snapshot.docChanges();

      changedDocs.forEach((change) => {
        if (change.type === 'added') {
          // TODO
        }
        if (change.type === 'modified') {
          for (let i = 0; i < this.events.length; i++) {
            if (this.events[i].id == change.doc.id) {
              this.events[i] = change.doc;
            }
          }
        }
        if (change.type === 'removed') {
          // TODO
        }
      })
    })

    query.get()
      .then((events) => {

        events.forEach((event) => {
          this.events.push(event);
        });

        loading.dismiss();

        if (events.size == 0) {
          this.cursor = 0;
        } else {
          this.cursor = this.events[this.events.length - 1]; // the last index of the collection
        }
        console.log(this.events);

      }).catch((err) => {
        console.log(err);
      });
  }

Answer 1

当您的Feed.ts 运行时，似乎没有设置firebase.auth().currentUser。这是意料之中的，因为客户端可能需要与服务器检查令牌是否仍然有效，这是一个异步操作。

在这种情况下，请始终使用onAuthStateChanged 侦听器，如getting the current signed in user 文档中的第一个sn-p 所示。

比如：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    ... code that uses the user's properties
  } else {
    // No user is signed in.
  }
});

编辑

您的新getEvents() is not a function 错误是由于this 在声明为function() 的回调函数中具有不同含义而引起的。这里最简单的解决方案是使用=> 表示法，它在函数内部维护this 的值：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.photo = user.photoURL;
    this.getEvents();
  } else {
    console.log('Not authenticated');
    // No user is signed in.
  }
});

请注意，您的其余代码已经使用=> 表示法，这让我怀疑您还没有编写 JavaScript 这么久。我强烈建议学习 JavaScript 回调函数教程，因为它会为您节省大量时间和问题）。

Answer 2

哦，现在我完全理解了，正如你所说，我没有在这里写太多的 javascript 代码，因为我正在看一些教程并添加一些其他东西。我解决了这个问题，你也帮助我理解了一个基本但重要的事情。非常感谢您的宝贵时间。