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
Auteur

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.

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

localhost c'est ta machine locale