基于用户身份验证状态的条件导航栏

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

我只是想指出另一种选择。 Renaud Tarnec 的回答是正确的，但还有第二种解决方案。

您可以使用箭头函数语法。使用箭头函数，上下文不会改变，因此无需在函数之前设置vm = this，因为this 仍将在函数内部工作。我是 lambda/arrow 函数的忠实粉丝，我认为没有理由不使用它们。

Renaud Tarnec 应该是公认的答案，但只是想提供第二个选项 :)

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

如果你想在created生命周期钩子中调用firebase.auth().onAuthStateChanged()，你应该这样做：

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

按照您的方式，您将 created 声明为“标准”组件方法。