Full-Stack Web Development with Vue.js and Node

Building Authentication with passport.js Chapter 6

In the preceding screenshot, note that JWT takes the payload, signs it, and generates a
random token.

Creating a register view page

Let's add a view page for the users to log in now. For that, like we did on the register

page, we will need to create a form that takes the email and password parameters. Create a

file called Login.vue inside src/components, as follows:

<template>

<v-form v-model="valid" ref="form" lazy-validation>

<v-text-field

label="Email"

v-model="email"

:rules="emailRules"

required

></v-text-field>

<v-text-field

label="Password"

v-model="password"

required

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

<v-btn @click="clear">clear</v-btn>

</v-form>

</template>

The vue file is a simple template file that contains the form components. The next thing to

do is to add a route for that file.

In src/router/index.js, add the following code:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/components/Home';

import Contact from '@/components/Contact';

import AddMovie from '@/components/AddMovie';

import Movie from '@/components/Movie';

import Register from '@/components/Register';

import Login from '@/components/Login';