Vuex: 소방기지 라우팅.if 문

Vuex: 소방기지 라우팅.if 문

나는 내 프로젝트에 소방서와 vuex를 사용하고 있다.그리고 사인인 메소드를 끝냈다.

나는 다음과 같은 행동을 하고 싶다.

사용자가 처음 로그인할 때 URL은 /selfonboarding으로 리디렉션되어 프로파일 설정을 완료한다.

사용자가 모든 정보를 제출하고 프로파일 설정을 완료하면 "properUser" 컬렉션의 상태 필드가 true로 설정된다.

그렇지 않으면 사용자가 프로파일 설정을 완료하지 않고 사용자가 모든 프로파일 설정을 완료할 때까지 상태가 거짓으로 유지된다.

모든 문서는 "properUser" 컬렉션에 "status" 필드가 있다.그래서 나는 상태 상태를 하나하나 확인해야 해.

이제 조건부가 필요해

proUser 컬렉션에 "status" == true라는 필드가 있으면 사용자는 /dashboard/제품으로 리디렉션된다.그리고 만약 컬렉션에 "상태" == false 필드가 있다면, 경로는 /selfonboarding이 될 것이다.

문제는 내가 "상태" == true 필드를 가진 사용자로 로그인할 때 /dashboard/제품으로 갈 수 있다는 것이다.

그러나 "상태" ==false를 가진 사용자로 로그인해도 루트는 그대로다.

내 질문은 왜 내가 "상태" == 거짓으로 /selfonboarding으로 이동할 수 없는가 하는 것이다.

이것은 나의 사인인 방식이다.

하나의 사용자 데이터만 검색하고 싶지만, 지금은 "상태" == 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
}

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

누군가 나를 도와줬으면 좋겠어.감사합니다.

함으로써var userStatus = db.collection('ProUser').where("status", "==", true)따라서 호출할 때 a 및 를 정의하십시오.get()당신은 a를 받고 not를 얻는다.DocumentSnapshot그러므로doc.exists언제나 돌아오다false, a에 a가 없기 때문에exists재산

넌 지금 이 순간을 반복해서QuerySnapshot(Doc에 표시된 대로) 또는docs또는size의 속성QuerySnapshot정확한 목표에 따라 원하는 문서가 존재하는지 확인한다.

---

아래 주석에 따라 업데이트하십시오.

사용자 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");
        }
   })

참조URL: https://stackoverflow.com/questions/64219760/vuex-firebase-routing-if-statement