Vuejs：如何在使用 Firebase 进行身份验证后转到页面

Question

vue 新手。

我有一个 vue 2 + 路由器设置。一切似乎工作正常。现在我想在使用 Firebase 进行身份验证后进入我网站的第一页。我验证了，邮箱验证过了，想做"vue way"进入网站。

我有点卡在这里了。出现错误：未定义推送。假设这会带我到正确的组件。

Firebase.auth().onAuthStateChanged(firebaseUser => {

    if (firebaseUser) {

        if (firebaseUser.emailVerified == true) {

            // alert("User is verified");

            // ERROR HERE, NEED TO NOW ENTER SITE. LEGIT USER
            this.$router.push({ path : '/home'});

        } else {
            document.getElementById('btnLogout').style.display = 'none';
        }

        firebaseUser.sendEmailVerification().then(function() {
            console.log('Send verification email');
        }, function(error) {
            console.log('Error: Did not send verification email');
        });

    } else {
        console.log('Not loggend in');
        document.getElementById('btnLogout').style.display = 'none';
    }
})

Answer 1

你可以试试Myfirebase它是一个解耦的SPA框架，与Firebase高度兼容且易于使用。

在这个用例中，身份验证模块已经内置在框架中，可以通过组件全局触发。

示例：

我们将确定用户是否已登录。
我们将通过 Firebase 身份验证检索用户电子邮件。

App.vue :

<template>
   <div class = "container">
      <h1>Welcome {{useremail}}</h1>
   </div>
</template>

<script>
 export default {
    mounted() {
      this.$auth.state({
         forward: "/app", // the user is signed-in
         redirect': "/login", // the user is not signed-in, redirecting to login
         then: (user) => {
            console.log(user.email)
            // retrieve useremail
            this.usereamil = user.email
         },
         catch: (error) => {
            console.log(error.message)
         }
       })
    },
    data() {
      return {
         useremail: ""
      } 
    }
 }
</script>

该项目仍处于开发阶段。如果您有任何问题，请随时提交任何问题或拉取请求。

Vuejs：如何在使用 Firebase 进行身份验证后转到页面

Vuejs: How to go to a page after authenticating with Firebase

vue-router

vuejs2