Vue.js Authentication and Authorization: A Complete Guide

Quick Summary

Think about using a web application without any security or privacy protections. It’s a risky move. Protecting user data and sensitive company information is essential for any business. As per the survey and online reports, large companies spend about 11% of their IT budgets on security, while small businesses allocate around 15%. This shows the importance of data security and privacy. Thus, many organizations implement authentication and authorization to fend off cyber threats.

Authentication and authorization are crucial regardless of the application type, whether social media or e-commerce. The rising number of data breaches can be mitigated using Vue.js for these security measures. This guide will help you establish authentication and authorization in your Vue.js application. Whether you are a beginner or an experienced developer, this tutorial will walk you through using Vue.js, Vue Router, and Vuex.

What is Vue js Authentication and Authorization?

Authentication and authorization are critical to any Web application, playing a key role in preventing data breaches and ensuring security.

Authentication confirms user identity, while authorization manages access based on user roles and permissions. Authentication involves user login, signup, and logout, while authorization restricts access to certain features and data on the backend.

Vue.js, an open-source frontend framework, simplifies the implementation of these security measures. Its libraries, techniques, and tools, such as data binding, virtual DOM, state management, and a robust router, make securing your application easier.

Differences between authentication and authorization

Authentication and authorization are essential for digital security but serve different purposes. Authentication confirms a user’s identity, using credentials such as usernames, passwords, or biometric data. Authorization, however, determines the actions and resources a verified user can access based on their permissions or role. While authentication answers “Who are you?” authorization answers “What can you do?” Both processes work together to ensure secure access control within systems and applications.

Step-by-Step Guide for Vue js Authentication and Authorization

User Registration and Login

1. Creating the Registration Form

To enable user registration on our web app, we need to create a registration form. In this example, we’ll keep it simple with just a username and password. Later, you can expand it to include fields like email, name, and more.

Here’s how to create a new Vue component for the registration form:

vue
  <template>
    <div>
      <h2>Register</h2>
      <form @submit.prevent="registerUser">
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
        <button type="submit">Register</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      registerUser() {
        // Registration logic goes here
      }
    }
  };
  </script>

In this snippet, we’ve designed a Vue component featuring a registration form that collects the username and password from the user. The form has a submit event listener that triggers the `registerUser` method upon submission.

2. Handling User Registration

In a real-world application, user registration data would be sent to a backend server for processing. For simplicity, we can use a mock API provided by JSONPlaceholder and utilize the axios library for making HTTP requests.

First, install axios by running:

npm install axios

Next, modify the `registerUser` method to send the registration data to the server:

vue
<script>
import axios from 'axios';

export default {
  // ... (previous code)
  methods: {
    async registerUser() {
      try {
        const response = await axios.post('https://jsonplaceholder.typicode.com/users', {
          username: this.username,
          password: this.password
        });
        console.log('User registered successfully!', response.data);
      } catch (error) {
        console.error('Error registering user:', error);
      }
    }
  }
};
</script>

With this update, when the user submits the registration form, the registerUser method sends the data to the JSONPlaceholder API. Although this is a mock API and does not store data permanently, in a real-world application, you would save user information in a database.

3. Implementing User Login

With user registration in place, let’s add the user login functionality. We’ll create a new component for the login form, using a similar approach to the registration component.

vue
<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="loginUser">
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username" required>
      <label for="password">Password:>/label>
      <input type="password" id="password" v-model="password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async loginUser() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users', {
          params: {
            username: this.username,
            password: this.password
          }
        });
        if (response.data.length === 1) {
          console.log('User logged in successfully!', response.data[0]);
        } else {
          console.log('Invalid username or password.');
        }
      } catch (error) {
        console.error('Error logging in:', error);
      }
    }
  }
};
</script>

In this code snippet, we created a Vue component for the login form. The loginUser method sends a GET request to the JSONPlaceholder API with the entered username and password as parameters. The API responds with an array of users matching the given credentials. If the array length is 1, we consider the user logged in successfully; otherwise, we display an error message.

With the registration and login forms complete, users can create accounts and log in to your web app. However, there’s no actual authentication or authorization yet, meaning anyone can access any route without restrictions. In the next section, we’ll explore JSON Web Tokens (JWT) to implement secure user authentication.

User Authentication with JWT

JSON Web Tokens (JWT) offer a secure and efficient method for conveying information as a JSON object between parties. In user authentication, once a user logs in, the server generates a JWT and returns it to the client. The client then uses this JWT in the headers of subsequent requests to verify its identity.

1. Understanding JSON Web Tokens

A JWT is made up of three segments separated by dots:

xxxxx.yyyyy.zzzzz

1. Header: Contains information about the token type and the algorithm used for signing.

2. Payload: Holds the claims and user-specific data.

3. Signature: Ensures the token’s integrity and verifies that it has not been altered.

The header and payload are Base64 encoded. The signature is generated by hashing the encoded header and payload with a secret key known only to the server. When the client includes the JWT in request headers, the server can verify its authenticity by re-calculating the signature with the same key and comparing it with the received signature.

2. Generating JWT on the Server

To generate JSON Web Tokens (JWT) on your server, you’ll need a library to handle this task. A common choice for Node.js is jsonwebtoken. To add it to your project, use the following command:

npm install jsonwebtoken

Now, let’s set up a basic Express.js route that creates a JWT when a user logs in:

javascript
// Import necessary modules
const express = require('express');
const jwt = require('jsonwebtoken');
const users = require('./users'); // Update this to reference your actual database module

// Initialize an Express application
const app = express();

// Define the secret key for signing JWTs
const secretKey = 'your_secret_key_here';

// Middleware to handle JSON request bodies
app.use(express.json());

// Route for user login
app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Query your database to find the user (replace with your actual database query)
  const user = users.find((u) => u.username === username && u.password === password);

  if (user) {
    // Create a JWT with the user's ID and role, set to expire in 1 hour
    const token = jwt.sign({ userId: user.id, role: user.role }, secretKey, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid username or password' });
  }
});

// Start the Express server
const port = 3000;
app.listen(port, () => console.log(`Server running at http://localhost:${port}`));

This example shows how to set up a simple Express.js server with a /login endpoint. When a user submits a POST request with their username and password, the server checks if the credentials are valid against the user’s array (replace this with your actual database query). If authentication is successful, a JWT is generated and sent back in the response. If not, the server responds with a 401 error and an appropriate message.

3. Verifying and Using JWT in Vue.js

With the server generating JWTs upon successful login, we now need to manage this on the Vue.js client side. For this, we’ll use the Vue-router library to handle routing and implement route guards to restrict access to certain routes for authenticated users.

Install `vue-router`:

npm install vue-router

Configure Vue Router:

Create a file named ‘router.js’ in the ‘src’ directory and set up the Vue Router:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';

Vue.use(Router);

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];

const router = new Router({
  mode: 'history',
  routes
});

// Route guard to verify authentication before accessing protected routes
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (token) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

In this setup, we define three routes: / (Home), /login (Login), and /dashboard (Dashboard). The /dashboard route is protected and requires authentication. The router. beforeEach function checks for a JWT in local storage and manages access based on its presence.

Create the Login.vue Component:

This component handles user login and stores the JWT:

vue
<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="loginUser">
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username" required>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async loginUser() {
      try {
        const response = await axios.post('http://localhost:3000/login', {
          username: this.username,
          password: this.password
        });
        if (response.data.token) {
          localStorage.setItem('token', response.data.token);
          this.$router.push('/dashboard');
        } else {
          console.log('Invalid username or password.');
        }
      } catch (error) {
        console.error('Error logging in:', error);
      }
    }
  }
};
</script>

The Login.vue component sends user credentials to the server’s /login endpoint. If a JWT is received, it’s saved in local storage, and the user is redirected to the dashboard.

Create the `Dashboard.vue` Component:

Here’s a basic `Dashboard.vue` component:

vue
<template>
  <div>
    <h2>Dashboard</h2>
    <p>Welcome to your dashboard!</p>
  </div>
</template>

<script>
export default {
  // Add any specific logic or user data here
};
</script>

Currently, this component is a placeholder. We’ll enhance it with role-based access control (RBAC) in future steps to manage access based on user roles.

With this setup, a successfully logged-in user will have their JWT stored in local storage and be redirected to the dashboard. The route guard ensures that only authenticated users can access protected routes.

Role-Based Access Control (RBAC)

Role–Based Access Control (RBAC) manages access to resources based on user roles. This approach involves defining various roles (such as admin or user) and assigning specific permissions to each role. Users are then assigned one or more roles that determine their level of access within the application.

In this scenario, we’ll create a basic RBAC system with two roles: user and admin. The user role will have limited access, while the admin role will have full access.

1. Designing User Roles and Permissions

We’ll start by setting up roles and their associated permissions. Although this would typically be stored in a database, we’ll define them as constants for simplicity:

javascript
// roles.js
const ROLES = {
  USER: 'user',
  ADMIN: 'admin'
};

const PERMISSIONS = {
  [ROLES.USER]: ['read'],
  [ROLES.ADMIN]: ['read', 'write', 'delete']
};

module.exports = {
  ROLES,
  PERMISSIONS
};

In this configuration, the USER role can only read, whereas the ADMIN role has permission to read, write, and delete.

2. Restricting Access Based on Roles

With roles and permissions defined, we will now adjust the router.js file to enforce role-based access:

javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';
import jwt from 'jsonwebtoken';  // Ensure this dependency is installed
import { ROLES } from './roles';

Vue.use(Router);

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, allowedRoles: [ROLES.ADMIN] }
  }
];

const router = new Router({
  mode: 'history',
  routes
});

// Route guard to validate authentication and role
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (token) {
      const decodedToken = jwt.decode(token);
      if (to.meta.allowedRoles.includes(decodedToken.role)) {
        next();
      } else {
        next('/');
      }
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

export default router;

In this updated configuration, the Dashboard route is protected and specifies ‘allowedRoles’ in its metadata. The route guard checks if the user’s role matches one of the allowed roles for the route. If the role is authorized, the user is granted access; otherwise, they are redirected to the home page.

Protecting Vue Router Routes

To ensure that users cannot access restricted routes by directly entering URLs, protecting these routes at the Vue Router level is essential. This can be achieved by implementing route guards that check the user’s role against the allowed roles for each route.

Here’s how you can implement this in your Vue.js application:

javascript
// router.js

// Import necessary modules
import Vue from 'vue';
import Router from 'vue-router';
import jwt from 'jsonwebtoken';
import { ROLES } from './roles'; // Define your roles in a separate file

Vue.use(Router);

const router = new Router({
  routes: [
    // Define your routes here
  ]
});

// Global route guard will check the authentication and authorization
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  
  if (to.matched.some((route) => route.meta.requiresAuth)) {
    if (token) {
      const decodedToken = jwt.decode(token);
      if (to.meta.allowedRoles && to.meta.allowedRoles.includes(decodedToken.role)) {
        next(); // User has the required role
      } else {
        next('/'); // User doesn't have the required role; redirect to home
      }
    } else {
      next('/login'); // User is not authenticated; redirect to login
    }
  } else {
    next(); // Allow access to non-protected routes
  }
});

export default router;

Route guards in Vue.js help secure your application by managing authentication and authorization. They first check if a route requires authentication. If the user is authenticated, the guard decodes the JWT to retrieve user information and verifies if the user’s role matches the allowed roles for that route. If the user lacks the necessary role or isn’t authenticated, they are redirected to the login page or home page. Implementing these route guards ensures your Vue.js app maintains secure and effective role-based access control.

Handling Authentication Errors

Effective error handling is crucial in any web application, especially regarding authentication and authorization. Here are some common scenarios to manage effectively:

• Invalid Credentials: When a user enters incorrect credentials during login, display an error message indicating the login attempt failed. This helps users understand the issue and correct their input.

• Expired Token: JSON Web Tokens (JWTs) include an expiration time. When the token expires, users need to log in again. Check the token’s expiration date and redirect users to the login page as needed.

• Server Errors: During authentication or authorization, server errors may occur. Display a user-friendly error message and provide an option to retry the action.

Handling these errors ensures a smooth, user-friendly experience, enhancing your application’s security and usability.

For top-notch Vuejs services, consider a leading Vue.js company offering comprehensive Vue JS development company.

Conclusion

This post highlights the importance of authentication and authorization in securing web apps and safeguarding user privacy. We discussed implementing user registration and login in Vue.js, using JSON Web Tokens (JWT) for authentication, and applying role-based access control (RBAC) for access restrictions. These strategies ensure a secure and personalized experience in your Vue.js app. Security is an ongoing process; keep your libraries updated, conduct regular audits, and stay informed about best practices. If you’re looking to hire Vue.js developers for expert assistance, consider partnering with a Vue.js company like Tagline Infotech, which provides tailored Vue.js development services.

FAQ’S: