Building Authentication with passport.js Chapter 6email: '',
password: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /\S+@\S+\.\S+/.test(v) || 'E-mail must be valid',
],
}),
methods: {
async submit() {
return axios({
method: 'post',
data: {
email: this.email,
password: this.password,
},
url: 'http://localhost:8081/users/login',
headers: {
'Content-Type': 'application/json',
},
})
.then((response) => {
window.localStorage.setItem('auth', response.data.token);
this.$swal('Great!', 'You are ready to start!', 'success');
this.$router.push({ name: 'Home' });
})
.catch((error) => {
const message = error.response.data.message;
this.$swal('Oh oo!', `${message}`, 'error');
this.$router.push({ name: 'Login' });
});
},
clear() {
this.$refs.form.reset();
},
},
};
</script>The validations are the same as on the register page. We have added two methods, submit
and clear. The clear method resets the form values, and the submit method simply hits
the API endpoint, taking the parameter from the form, and responds with the correct
message, which is then displayed in the UI. Upon successful completion, the user will be
redirected to the home page.