J'ai vraiment besoin de votre aide.
En fait, je suis débutante dans le développement, je connais très peu de chose.
Le problème est que je n'arrive pas à me loguer sur mon application (Js) installé en local sur ma machine.
Lorsque je tente de me connecter, j'ai le message d'erreur suivant:
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
Cette erreur me renvoit sur la ligne : this.errorMsg = err.response.data.error
Code : Tout sélectionner
<template>
<div>
<div class="c-app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<h3>Connexion - Policier</h3>
<p class="text-muted">Connectez-vous pour démarrer la session</p>
<validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<validation-provider name="Pseudo"
:rules="{required: true, min: 4}"
v-slot="validationContext">
<b-form-group id="email-group" label="Pseudo" label-for="email">
<b-form-input type="text" id="email" name="email" autocomplete="off"
v-model="form.email"
:state="getValidationState(validationContext)"
aria-describedby="email-feedback">
</b-form-input>
<b-form-invalid-feedback id="email-feedback">
{{ validationContext.errors[0] }}
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
<validation-provider name="Mot de passe"
:rules="{required: true, min: 4}"
v-slot="validationContext">
<b-form-group id="password-group" label="Mot de passe" label-for="password">
<b-form-input type="password" id="password" name="password"
v-model="form.password"
:state="getValidationState(validationContext)"
aria-describedby="password-feedback">
</b-form-input>
<b-form-invalid-feedback id="password-feedback">
{{ validationContext.errors[0] }}
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
<div class="row">
<div class="col-6 text-left">
<b-button type="submit" name="login" id="login" class="btn btn-primary px-4" variant="primary">Connexion</b-button>
</div>
<div class="col-6 text-right">
<router-link to="/" class="btn btn-info px-4">
Accueil
</router-link>
</div>
</div>
</b-form>
</validation-observer>
</div>
</div>
<div class="card text-white py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<img src="@/assets/logo.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Loading v-if="loading" />
</div>
</template>
<script>
import '@/assets/css/coreui.css'
import Loading from '@/components/Loading.vue'
import FlashMsg from '@/components/FlashMsg.vue'
export default {
name: 'OfficerAuth',
components: {
Loading,
FlashMsg
},
data () {
return {
loading: false,
form: {
email: '',
password: ''
},
error: false,
errorMsg: ''
}
},
methods: {
getValidationState ({ dirty, validated, valid = null }) {
return dirty || validated ? valid : null
},
resetForm () {
this.form = {
email: null,
password: null
}
this.$nextTick(() => {
this.$refs.observer.reset()
})
},
reset () {
this.form = {
email: null,
password: null
}
},
onSubmit () {
this.loading = true
if (this.error === true) { this.error = false }
this.axios.post('/officers/login', {
identifiant: this.form.email,
password: this.form.password
}).then((response) => {
this.reset()
let data = {
id: response.data.data.id,
name: response.data.data.name,
first_name: response.data.data.first_name,
email: response.data.data.email
}
this.$session.start()
this.$session.set('officer', data)
this.$router.push('/officer/dashboard')
}).catch((err) => {
console.log(err)
this.error = true
this.errorMsg = err.response.data.error
}).finally(() => {
this.loading = false
})
}
}
}
</script>
// WEBPACK FOOTER //
// src/views/officer/OfficerAuth.vue