Vuex: маршрутизация Firebase. Если заявление


Vuex: маршрутизация Firebase. Если заявление

06.10.2020 08:16:08 Просмотров 40 Источник

Я использую firestore и vuex для своего проекта. И я закончил метод подписи.

Я хочу выполнить следующее действие.

Когда пользователь войдет в систему в первый раз, URL-адрес будет перенаправлен на /selfonboarding, чтобы завершить настройку профиля.

Если пользователь отправит всю информацию и завершит настройку профиля, то поле статуса в коллекции "proUser" будет иметь значение true.

В противном случае пользователь не завершает настройку профиля, статус остается ложным до тех пор, пока пользователь не завершит все настройки профиля.

Все документы имеют поле "Статус" в коллекции "проузер". Поэтому мне нужно проверить состояние состояния один за другим.

Теперь мне нужна условная ветвь.

Вот чего я хочу добиться: если в коллекции proUser есть поле "status" = = true, пользователь перенаправится в /dashboard/products. И если коллекция имеет поле" status " = = false, то маршрут будет /selfonboarding.

Проблема в том, что когда я вхожу в систему как пользователь, у которого есть поле "Статус" == true, я могу перейти в /dashboard/products.

Но даже если я войду в систему как пользователь, у которого есть "статус" == false, маршрут все равно остается тем же.

enter image description here

Мой вопрос заключается в том, почему я не могу перейти в /selfonboarding как "status" == 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
}

логин.Вью

<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>

Надеюсь, кто-нибудь мне поможет. Спасибо

У вопроса есть решение - Посмотреть?

Ответы - Vuex: маршрутизация Firebase. Если заявление / Vuex: Firebase routing. If statement

Является ответом!
Renaud Tarnec

06.10.2020 08:45:55

Делая var userStatus = db.collection('ProUser').where("status", "==", true), вы определяете Query и, следовательно, при вызове get() вы получаете QuerySnapshot, а не DocumentSnapshot. Поэтому doc.exists всегда возвращает false, так как QuerySnapshot не имеет свойства exists.

Вам нужно либо зациклиться на QuerySnapshot (как показано в документе doc), либо использовать свойства Query0 или Query1 QuerySnapshot, чтобы проверить, существует ли нужный документ, в зависимости от вашей точной цели.


Обновление после приведенных ниже комментариев:

Я понимаю, что вы хотите проверить документ с идентификатором, соответствующим идентификатору пользователя. Выполните следующие действия:

Query3
Помочь в развитии проекта:
Закрыть X