ref: www.thepolyglotdeveloper.com/2018/04/sim…
Sometimes the best examples towards learning a new framework is through a simple user login sample. Login involves many concepts, including forms, data binding, routing, and potentially HTTP to a remote service, all of which are core concepts in any web application.
We’re going to see how to implement a simple login form in a web application that uses the Vue.js JavaScript framework.
We’re going to have a login screen with some hard coded credential data. When the correct information is entered, the application will navigate to a potentially secure page. Trying to access the page manually will result in navigation back to the login page because the application hadn’t been authenticated. The authorization status and logout is controlled by a parent component.
Create a New Vue.js Web Application
To make our lives easier, we’re going to use the Vue CLI to create a new project. It is not absolutely necessary to use the Vue CLI, but I totally recommend it.
With the CLI installed and configured, execute the following command:
vue create simple-login-project
When prompted, choose to specify the features that you’d like included. For this application, the only required feature will be the vue-router. It doesn’t matter how you choose to store the configuration data.
At this point we can start development.
Develop Login Functionality in the JavaScript Web Application
For this project we’re going to focus on two components which will act as our routes as well as a parent component that the routes will pass through.
In your project, create a src/views/secure.vue file with the following code:
<template>
<div id="secure">
<h1>Secure Area</h1>
</div>
</template>
<script>
export default {
name: 'Secure',
data() {
return {};
}
}
</script>
The above code represents our protected application area. For example, it should only be accessed if the user has logged in. Because this is our end goal, we don’t really need to add any logic to the page. Getting to the page is enough for us.
Now create a src/views/login.vue file with the following code:
<template>
<div id="login">
<h1>Login</h1>
<input type="text" name="username" v-model="input.username" placeholder="Username" />
<input type="password" name="password" v-model="input.password" placeholder="Password" />
<button type="button" v-on:click="login()">Login</button>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
input: {
username: "",
password: ""
}
}
},
methods: {
login() {
if(this.input.username != "" && this.input.password != "") {
if(this.input.username == this.$parent.mockAccount.username && this.input.password == this.$parent.mockAccount.password) {
this.$emit("authenticated", true);
this.$router.replace({ name: "secure" });
} else {
console.log("The username and / or password is incorrect");
}
} else {
console.log("A username and password must be present");
}
}
}
}
</script>
More is happening in our login.vue file than the previous, so let’s break it down, starting with the
