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

如果您想在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;
        }
      });
   }
};

您将其声明为“标准”组件方法。

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

2 个答案: