Login components in vuejs

Question

I've built a login component with the below code for users to log in the backend is flask and is using flask_login.

const LoginScreen = {

    template: `
                <div>
                    <h1>Sign In</h1>
                    <form id="loginform" class="pure-form">
                        <fieldset>
                            <input type="text" name="email" placeholder="email" v-model="logindetails.email"/>
                            <input type="password" name="password" placeholder="password" v-model="logindetails.password"/>
                            <button class="pure-button pure-button-primary" v-on:click="login">Login</button>
                        </fieldset>
                    </form>
                </div>
    `,

    data: function () {
        return {
                logindetails:{}
        }
    },

    methods: {
                login: function(){
                                    axios.post('/login/',
                                        this.logindetails,
                                           {
                                             headers: {
                                                        'Content-type': 'application/json',
                                                        'Accept': 'application/json',
                                                        'X-CSRF-TOKEN': document.querySelector('#csrftoken').getAttribute('content')
                                                       }
                                           }
                                          ).then(response => { this.logindetails = {};
                                                               this.$router.push({path: '/'});
                                                             }
                                                )
                                           .catch(function (error) {
                                                              console.log(error);
                                                            });
                                    }
            }
};

It seems to work correctly (though there are times when it asks me to log in again for seemingly no reason), however the component is putting the submitted form details into the querystring of the url ( example ).

Would anyone be able to tell me what I am doing wrong or, if I am doing this totally incorrectly, point me in the direction of a codebase/guide that is doing logins correctly?

Many thanks in advance.

Answer 1

Take a look at Vue v-on event modifiers to modify the default element behavior.

In your case you can do:

<button @click.prevent="login">Login</button>

Or in the form tag (ensure your submit button is type "submit"):

<form @submit.prevent="login">

Answer 2

with regards to the component is putting the submitted form details into the querystring of the url , the reason is that clicking on the button also trigger submit on the form.

HTML form submits form values to the server.

But normally in JS frameworks like Vue or React, form values are submited through ajax, without any page refresh. So using <form> has not much value here.

2 things you could do in this case

1. Remove <form> element. it should still works corectly
2. handle the form submit event. For eg

<form @submit="handleSubmit($event)">

methods: {
    handleSubmit:(e) =>{
      e.preventDefault();
    }
  }