[Vuejs]-Conditional navbar based on a user authentication status

by

2👍

✅

If you want to call firebase.auth().onAuthStateChanged() in the created lifecycle hook you should do as follows:

export default {
  name: 'Navigation',
  data() {
    return {
      user: null,
    };
  },
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  },
  methods: {
    ....
    }
  },
  created: function () {
      var vm = this;
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          vm.user = user;
        } else {
          vm.user = null;
        }
      });
   }
};

The way you do it, you are declaring created as a “standard” component method.

👤Renaud Tarnec

3👍

I just wanted to point out another option. Renaud Tarnec’s answer is correct but there is a second solution.

You can use the arrow function syntax. With arrow functions the context doesnt change so there is no need to set vm = this before the function since this will still work inside the function. I’m a huge fan of lambda/arrow functions and see no reason not to use them.

Renaud Tarnec’s should be the accepted answer but just wanted to offer a second option 🙂

export default {
  name: 'Navigation',
  data() {
    return {
      user: null,
    };
  },
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  },
  methods: {
    ....
    }
  },
  created: function () {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          this.user = user;
        } else {
          this.user = null;
        }
      });
   }
};
👤abaga129

Leave a comment