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