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

时间:2019-06-17 20:43:00

标签: javascript angular firebase firebase-authentication ionic4

我添加了您提到的功能,但登录时显示此错误:

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中的photo变量为null,无法绑定到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);
      });
  }

2 个答案:

答案 0 :(得分:0)

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

在这种情况下,请始终使用onAuthStateChanged侦听器,如getting the current signed in user上文档的第一个代码段所示。

类似这样:

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中的回调函数教程,因为这将为您节省很多时间和问题。

答案 1 :(得分:0)

哦,现在我完全理解了,正如您所说的那样,我在这里并没有写太多的javascript代码,因为我在努力学习一些tutoirals并添加其他一些东西。我已解决问题,您也帮助我了解了基本但重要的事情。非常感谢您的宝贵时间。