A Step-by-Step Guide to Routing and Authentication in vuejs

Vue.js is a popular front-end JavaScript framework used to build single-page applications (SPAs). One of the essential features of SPAs is routing, which allows users to navigate between different pages of an application. Another crucial aspect of web applications is authentication, which ensures that only authorized users can access protected areas of the application. In this article, we will provide a step-by-step guide to implementing routing and authentication in Vue.js.

Step 1: Setting Up the Environment Before you can start building your application, you need to set up your development environment. You'll need to have Node.js and Vue CLI installed. Once you have those set up, create a new Vue.js project using the Vue CLI by running the following command in your terminal:

vue create my-app

Step 2: Installing Dependencies

After setting up your project, you need to install the dependencies required for routing and authentication. Vue Router is a widely used routing library for Vue.js, and Vuex is a state management library. Install both libraries by running the following command in your terminal:

npm install vue-router vuex

Step 3: Creating the Router

The router is responsible for mapping URLs to components. Create a new file called router.js in the src directory of your project, import Vue Router, and create a new router instance. Here's an example of how your router.js file might look like:

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 router = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: "/dashboard",
      name: "dashboard",
      component: Dashboard,
      meta: {
        requiresAuth: true,
      },
    },
  ],
});

export default router;

In this example, we've defined three routes: home, login, and dashboard. The home and login routes are public routes that don't require authentication. The dashboard route is a protected route that requires authentication to access. The meta property is used to define additional information about the route, such as whether it requires authentication.

Step 4: Creating the Authentication System Create a new file called store.js in the src directory of your project to implement the authentication system. Vuex is a state management library that provides a central store for managing the application's state. Here's an example of how your store.js file might look like:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
  },
  actions: {
    login({ commit }, user) {
      commit("setUser", user);
    },
    logout({ commit }) {
      commit("setUser", null);
    },
  },
  getters: {
    isAuthenticated: (state) => state.user !== null,
  },
});

export default store;

Step 5: Protecting Routes with Authentication

Now that we have our router and authentication system set up, we need to protect our protected routes. We can do this by checking whether the user is authenticated before allowing access to the route. We'll do this by using a navigation guard.

Create a new file called router.js in the src directory of your project and import the Vuex store we created earlier. Then, add a navigation guard that checks if the requiresAuth meta property is set to true and if the user is authenticated. If the user is not authenticated, redirect them to the login page. Here's an example of how your router.js file might look like after adding the navigation guard:

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 store from "./store";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: "/dashboard",
      name: "dashboard",
      component: Dashboard,
      meta: {
        requiresAuth: true,
      },
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((route) => route.meta.requiresAuth)) {
    if (store.getters.isAuthenticated) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

export default router;