Vuex：Firebase 路由。 如果语句

Question

我正在为我的项目使用 firestore 和 vuex。 我完成了 signIn 方法。

我想完成以下操作。

当用户第一次登录时，URL 将重定向到 /selfonboarding 以完成配置文件设置。

如果用户提交所有信息并完成配置文件设置，则“proUser”集合中的状态字段设置为true。

否则，用户没有完成配置文件设置，状态保持为假，直到用户完成所有配置文件设置。

所有文档在“proUser”集合中都有“状态”字段。 所以我需要一一检查状态情况。

现在，我需要条件分支。

这是我想要实现的目标：如果 proUser 集合具有字段“status” == true，则用户将重定向到 /dashboard/products。 如果集合有 "status" == false 字段，则路由将是 /selfonboarding。

问题是，当我以具有“status” == true 字段的用户身份登录时，我可以转到 /dashboard/products。

但是即使我以具有“status”==false 的用户身份登录，路由仍然相同。

我的问题是为什么我不能将 /selfonboarding 作为“状态”== false 移动到。

这是我的登录方法。

我只想检索一个用户数据，但现在我正在检索所有“状态”== true 的用户。

   import 'firebase/firebase-auth'
import fireApp from '@/plugins/firebase'
import router from '../../router'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

const state = {
    currentUser: null
}

const getters = {
    currentUser: state => state.currentUser
}

const mutations = {
    userStatus: (state, user) => {
        // if(user) {
        //   state.currentUser = user
        // }
        // else {
        //   state.currentUser = null
        // }
        user === null ? state.currentUser = null : state.currentUser = user.email
      }
}

const actions = {
 signIn: async ({ commit }, user) => {
    try {
      const userData = await fireApp.auth().signInWithEmailAndPassword(
          user.email,
          user.password
      );

        var userStatus = db.collection('ProUser').where("status", "==", true)

        if(userStatus) {
            userStatus.get().then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    console.log(doc.id, " => ", doc.data());
                    router.push("/dashboard/products");
                });
                
            })
        } else {
            console.log(doc.id, " => ", doc.data());
            router.push("/selfonboarding");
        }

        
    }
    catch(error) {
        const errorCode = error.code
        const errorMesage = error.message
        if(errorCode === 'auth/wrong-password') {
            alert('wrong password')
        } else {
            alert(errorMesage)
            }
        }
    },

    signOut: async({ commit }) => {
        try {
            await fireApp.auth().signOut()
        }
        catch(error) {
            alert(`error sign out, ${error}`)
        }
        commit('userStatus', null)
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}

登录.vue

<template>
<div>
    <img src="../img/svg/Mangosteen.png" alt="">
    <b-card
    class="login-card"
    >
    <form action="" @submit.prevent="signIn">
    <div>
    <b-form>

        <p class="mt-3  text-center login-title">Profile</p>   
    
        <b-form-input
        id="input-3"
        v-model="email"
        type="email"
        required
        placeholder="Email"
        class="mt-5 input"
        name="email" 
        v-validate="'required|email'" 
        :class="{ 'mt-5 input': errors.has('email') }">
        >
        </b-form-input>
        <p v-show="errors.has('email')" class="validate text-center">{{ errors.first('email') }}</p>
        <b-form-input
        id="input-4"
        v-model="password"
        type="password"
        required
        placeholder="Password"
        class="mt-5 input"
        name="password" 
        v-validate="'required|min:6'" 
        :class="{ 'mt-5 input': errors.has('password') }"
        ></b-form-input>
        <p v-show="errors.has('password')" class="validate text-center">{{ errors.first('password') }}</p>
        <error-bar :error="error"></error-bar> 

    </b-form>

    <b-button class="loginbutton-color" type="submit">Login</b-button>
    <div v-if="show">
        <b-button class="loginbutton-color" type="submit">
            <spring-spinner
                :animation-duration="3000"
                :size="27"
                color="#ff1d5e"
                class="loading"
            />
      </b-button>
    </div>
    
    </div>
    </form>
</b-card>

</div>
</template>

<script>
import fireApp from '@/plugins/firebase'
import ErrorBar from '@/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
import store from '../store'

  export default {
    data() {
      return {
        email: '',
        password: '',
        error: '',
        show: false
      }
    },
    components: {
      ErrorBar: ErrorBar,
      SpringSpinner
    },
    methods: {
        signIn() {
            this.show = true
            const user = {
              email: this.email,
              password: this.password
            }
            store.dispatch('signIn', user)
            this.show = false
        },

    }
  }
</script>

我希望有人帮助我。 谢谢

Answer 1

通过执行var userStatus = db.collection('ProUser').where("status", "==", true)你定义了一个Query ，因此，当调用get()你得到一个QuerySnapshot而不是DocumentSnapshot 。 因此doc.exists总是返回false ，因为QuerySnapshot没有exists属性。

您要么需要在QuerySnapshot上循环（如doc 中所示），要么使用QuerySnapshot的docs或size属性来检查所需的文档是否存在，具体取决于您的确切目标。

---

根据以下评论更新：

我了解到您想查看与用户 ID 对应的 ID 的文档。 执行以下操作：

   // Get the user id (from the user object I guess)
   const userId = user.uid;
   // or maybe through  const userId = fireApp.auth().currentUser.uid;

   const proUserDocRef = db.collection('ProUser').doc(userId);
            
   proUserDocRef.get().then((doc) => {
        if (doc.exists && doc.data().status === true)) {
            router.push("dashboard/products");
        } else {
            router.push("selfonboarding");
        }
   })