lundi 5 octobre 2020

Vuex: Firebase routing. If statement

I am using firestore for my project. I am using vuex, and I finished signIn mehod.

Now, I need the conditional branch.

Here is what I want to achieve.

If proUser collection has the field, "status" == true, the route is dashboard/products. And if the collection doesn't have "status" == true field, the route is selfonboarding.

But now, when I login as the user who has "status" == true field, I always go to /selfonboarding.

enter image description here

I cannot figure out why I cannot go to the dashboard/products.

This is my signIn method.

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 = fireApp.auth().currentUser;
        var userStatus = db.collection('ProUser').where("status", "==", true)
        userStatus.get().then((doc) => {
            if (doc.exists) {
                router.push("dashboard/products");
            } else {
                router.push("selfonboarding");
            }
        })
        
    }
    catch(error) {
        const errorCode = error.code
        const errorMesage = error.message
        if(errorCode === 'auth/wrong-password') {
            alert('wrong password')
        } else {
            alert(errorMesage)
            }
        }
    },
}

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

I hope someone helps me. Thank you

Aucun commentaire:

Enregistrer un commentaire