Vue || How To Set Up Vue Login Authentication & Route Handling With Vue Router Using Vue

December 24, 2020 admin No comments

The following is a module which demonstrates how to set up Vue login authentication and route handling using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.

1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project.

There are 3 routes: a ‘Home‘ page, a ‘User‘ page, and a ‘Login‘ page.





		
		
			1. Router Index File
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 24, 2020
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Vue Router index.js file
// ============================================================================ 
import { createWebHistory, createRouter } from "vue-router";

const routes = [
    {
        path: "/",
        name: "home",
        component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"),
    },
    {
        path: "/user",
        name: "user",
        component: () => import(/* webpackChunkName: "user" */ "../views/User.vue"),
        meta: {requiresAuth: true} // Indicates that this route requires authentication
    },  
    {
        path: "/login",
        name: "login",
        component: () => import(/* webpackChunkName: "login" */ "../views/Login.vue")
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

router.beforeEach((to, from, next) => {  
    // Determine if the route requires authentication
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // Get value from somewhere to determine if the user is 
        // logged in or not
        let isLoggedIn = false;
        
        // If user is not logged in, navigate to the named "login" route 
        // with a query string parameter indicating where to navigate to after
        // successful login        
        if (!isLoggedIn) {
            // Navigate to login route
            next({
                name: "login",
                query: {redirect: to.fullPath}
            });           
        } else {
            next();
        }
    } else {
        next();
    }
});

export default router; // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 24, 2020
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Vue Router index.js file
// ============================================================================ 
import { createWebHistory, createRouter } from "vue-router";
 
const routes = [
    {
        path: "/",
        name: "home",
        component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"),
    },
    {
        path: "/user",
        name: "user",
        component: () => import(/* webpackChunkName: "user" */ "../views/User.vue"),
        meta: {requiresAuth: true} // Indicates that this route requires authentication
    },  
    {
        path: "/login",
        name: "login",
        component: () => import(/* webpackChunkName: "login" */ "../views/Login.vue")
    }
];
 
const router = createRouter({
    history: createWebHistory(),
    routes
});
 
router.beforeEach((to, from, next) => {  
    // Determine if the route requires authentication
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // Get value from somewhere to determine if the user is 
        // logged in or not
        let isLoggedIn = false;
        
        // If user is not logged in, navigate to the named "login" route 
        // with a query string parameter indicating where to navigate to after
        // successful login        
        if (!isLoggedIn) {
            // Navigate to login route
            next({
                name: "login",
                query: {redirect: to.fullPath}
            });           
        } else {
            next();
        }
    } else {
        next();
    }
});
 
export default router; // http://programmingnotes.org/

The ‘User‘ route has a meta property that says that it requires authentication.

Next, the route records are iterated over to check if the requested page requires authentication. If it does, the route is redirected to the ‘Login‘ named route, with a query string parameter of the original page to redirect to after successful login.

2. Login Route Page

The example below is the ‘Login‘ route page. It doesn’t do anything special, it just demonstrates how to accept user input and redirect to the specified path after successful login is complete.

Accessing the route redirect path can be done by using the ‘query’ property on the route object.





		
		
			2. Login.Vue
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 24, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Login.vue
//    Description: Login authentication page
// ============================================================================
-->
<template>
    <section>
        <h1> Login </h1>
        <div class="form">
            <label for="username">Username</label>
            <input v-model="username" type="text" name="username" class="input" autocomplete="off" />
            <label for="password">Password</label>
            <input v-model="password" type="password" class="input" autocomplete="off" />
            <button @click="login" class="btn">Login</button>            
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            username: null,
            password: null,
        }
    }, 
    methods: {
        login() {
            // Authenticate user against API
            console.log(this.username, this.password);
            
            // Set value somewhere to indicate that the user is logged in
            let isLoggedIn = true;
            
            // Redirect to page
            const redirectPath = this.$route.query.redirect || '/';
            this.$router.push(redirectPath);
        }
    }
}
</script>

<style scoped>
.form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}
</style> <!-- http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 24, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Login.vue
//    Description: Login authentication page
// ============================================================================
-->
<template>
    <section>
        <h1> Login </h1>
        <div class="form">
            <label for="username">Username</label>
            <input v-model="username" type="text" name="username" class="input" autocomplete="off" />
            <label for="password">Password</label>
            <input v-model="password" type="password" class="input" autocomplete="off" />
            <button @click="login" class="btn">Login</button>            
        </div>
    </section>
</template>
 
<script>
export default {
    data() {
        return {
            username: null,
            password: null,
        }
    }, 
    methods: {
        login() {
            // Authenticate user against API
            console.log(this.username, this.password);
            
            // Set value somewhere to indicate that the user is logged in
            let isLoggedIn = true;
            
            // Redirect to page
            const redirectPath = this.$route.query.redirect || '/';
            this.$router.push(redirectPath);
        }
    }
}
</script>
 
<style scoped>
.form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}
</style> <!-- http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: JavaScript, Vue Tags: javascript, vue, vue router

Vue || How To Set Up Vue Login Authentication & Route Handling With Vue Router Using Vue

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories