Vuex：Firebase 路由。如果语句

Posted 2023-02-22

【中文标题】Vuex：Firebase 路由。如果语句

【英文标题】：Vuex: Firebase routing. If statement

【发布时间】：2021-01-20 23:26:24

【问题描述】：

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

我要完成以下动作。

当用户第一次登录时，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" >
    <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>

我希望有人帮助我。 谢谢

【参考方案1】：

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

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

---

按照以下 cmets 更新：

我了解到您想查看与用户 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");
        
   )

【讨论】：

对不起，我以“status”== false 的用户身份再次尝试。然后，我也去了路径/dashboard/products。我该如何解决这个问题？

你能分享你改编的代码吗？请通过单击编辑链接使用新代码更新您的问题。请注意，您需要真正适应 if 子句。无论您在 query 定义中所做的任何更改，if (doc.exists) 都不起作用。 QuerySnapshot 没有 exists 属性。

我需要了解您到底想做什么。我不清楚您要实现什么业务逻辑以将用户重定向到另一个页面（/dashboard/products或selfonboarding）。您查询了几个文档：您如何根据那些 几个 文档来决定要重定向到的页面？

对不起，集合“proUser”有“status”字段。如果为真，用户将重定向到 /dashboard/products。如果为 false，用户将重定向到 /selfonboarding。这就是我想要实现的目标。

非常感谢！ const userId = fireApp.auth().currentUser.uid;工作！我