Условная навигационная панель, основанная на статусе аутентификации пользователя

Question

Я пытаюсь условно отобразить элементы навигационной панели компонента навигации на основе функции onAuthStateChanged Firebase.

<template>
    <navbar dark position="top" class="default-color" scrolling>
        <mdb-navbar-brand href="#/" style="font-weight: bolder;">
            Test
        </mdb-navbar-brand>
        <navbar-collapse>
            <navbar-nav left>
                <navbar-item href="#/" waves-fixed>Home</navbar-item>
                <navbar-item href="#/css" waves-fixed>About</navbar-item>
                <navbar-item href="#/jobs" waves-fixed>Jobs</navbar-item>
                <navbar-item href="#/advanced" waves-fixed>Profile</navbar-item>
            </navbar-nav>
            <navbar-nav right>
                <router-link to="/signup"><button v-if="!user" type="button" class="btn btn-primary">Signup</button></router-link>
                <router-link to="/login"><button v-if="!user" type="button" class="btn btn-primary">Login</button></router-link>
                <p><a v-if="user" @click="logout">Logout</a></p>
            </navbar-nav>
        </navbar-collapse>
    </navbar>    
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import NavbarItem from '@/components/NavbarItem.vue';
import NavbarNav from '@/components/NavbarNav.vue';
import NavbarCollapse from '@/components/NavbarCollapse.vue';
import mdbNavbarBrand from '@/components/NavbarBrand.vue';
import firebase from 'firebase';

export default {
  name: 'Navigation',
  data() {
    return {
      user: null,
    };
  },
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  },
  methods: {
    logout() {
      firebase.auth().signOut()
        .then(() => {
          this.$router.push({path: '/'});
        });
    },
    created() {
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          this.user = user;
        } else {
          this.user = null;
        }
      });
    }
  }
};

</script>

К сожалению, по какой-то причине onAuthStateChanged не работает. Я также попытался просто отобразить пользователя в консоли с точки зрения компонентов, но он также не работает:

console.log(firebase.auth().currentUser);

Заранее спасибо за любые подсказки.

Answer 1

Я просто хотел указать на другой вариант. Ответ Рено Тарнека правильный, но есть и второе решение.

Вы можете использовать синтаксис функции стрелки. С функциями стрелок контекст не изменяется, поэтому нет необходимости устанавливать vm = this перед функцией, так как this все еще будет работать внутри функции. Я большой поклонник функций лямбда / стрелок и не вижу причин, чтобы не использовать их.

Рено Тарнец должен быть принятым ответом, но просто хотел предложить второй вариант:)

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;
        }
      });
   }
};

Answer 2

Если вы хотите вызвать firebase.auth().onAuthStateChanged() в created ловушке жизненного цикла, вы должны сделать следующее:

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;
        }
      });
   }
};

То, как вы это делаете, вы объявляете созданным как «стандартный» метод компонента.