VueJS Boostrap Express

Par Bob456, il y a 7 ans

Javascript NodeJS

Bonjour,

Je suis arrivé à l'étape finale de mon site.
J'ai un front avec VueJS + Boostrap VueJS
Un Back avec Node.js

Sur un navigateur, sur un PC tout fonctionne parfaitement
Par contre sur mobile... Des la page de Login je ne peux pas submit... Je clique dessus mais rien ne ce passe...

Même pas le message d'erreur comme quoi le login ou mot de passe est faux...
C'est juste que ça appuie pas dessus...

<b-row class="mt-5"> <b-col cols="3"></b-col> <b-col cols="6"> <b-form @click="handleSubmit"> <b-form-group id="exampleInputGroup1" label="Email address:" label-for="exampleInput1" description="We'll never share your email with anyone else."> <b-form-input id="exampleInput1" type="email" v-model="email" required placeholder="Enter email"> </b-form-input> </b-form-group> <b-form-group id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2"> <b-form-input id="exampleInput2" type="password" v-model="password" required placeholder="Enter name"> </b-form-input> </b-form-group> <div v-if="error"> Mauvais Login ou Mot de passe </div> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </b-col> </b-row> <script> export default { data(){ return { email : "", password : "", error : false } }, methods : { handleSubmit(e){ e.preventDefault() if (this.password.length > 0) { this.$http.post('http://localhost:3000/login', { error: this.error, email: this.email, password: this.password }) .then(response => { let is_admin = response.data.user.is_admin this.$cookies.set('user_session',response.data.token, 60*60*24, "/", null, false); localStorage.setItem('user',JSON.stringify(response.data.user)) if ($cookies.get('user_session') != null){ this.$emit('loggedIn') if(this.$route.params.nextUrl != null){ this.$router.push(this.$route.params.nextUrl) } else { if(is_admin== 1){ this.$router.push('admin') } else { this.$router.push('dashboard') } } } }) .catch((error) => { if (error.response.status == 404){ this.error = true } console.error(error.response); }); } } } } </script>

Ce que je fais

J'appuie comme un goret sur tout l'écran pour activer le submit

Ce que je veux

Que cela fasse quelque chose...

Ce que j'obtiens

Rien :)

Merci pour votre aide :)

2 réponses

Bob456, il y a 7 ans

J'ai un peu plus d'explication :

Alors, le serveur NodeJS sur le serveur dédié écoute le port LocalHost:4000

Sur ce bout de code, coté front, on à :

if (this.password.length > 0) { this.$http.post('http://localhost:4000/login', { error: this.error, email: this.email, password: this.password }) .then(response => { let is_admin = response.data.user.is_admin this.$cookies.set('user_session',response.data.token, 60*60*24, "/", null, false); localStorage.setItem('user',JSON.stringify(response.data.user)) if ($cookies.get('user_session') != null){ this.$emit('loggedIn') if(this.$route.params.nextUrl != null){ this.$router.push(this.$route.params.nextUrl) } else { if(is_admin== 1){ this.$router.push('admin') } else { this.$router.push('dashboard') } } } }) .catch((error) => { if (error.response.status == 404){ // ----> LIGNE 83 this.error = true } console.error(error.response); }); }

La page me renvoie cette erreur :

"Login.vue:83 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
at Login.vue:83"

Enfaite, j'ai l'impression que Axios envoie les données sur le localhost de l'utilisateur coté front... donc pas sur le bon serveur.

olive140, il y a 7 ans

Salut,
Alors, le serveur NodeJS sur le serveur dédié écoute le port LocalHost:4000

localhost c'est ta machine locale