Learn Vue middleware pipeline in one article

Often when building a SPA, you will need to protect certain routes. For example, suppose there is a dashboard route that is only accessible to authenticated users. We can use auth middleware to ensure that only legitimate users can access it.

In this tutorial, we will learn how to implement a middleware pipeline for a Vue application using Vue-Router[1].

What is a middleware pipeline?

A middleware pipeline is a bunch of different middlewares that run in parallel with each other.

Continuing with the previous example, suppose we have another route at /dashboard/movies that we only want subscribed users to have access to. We already know that to access the dashboard route, you need to be authenticated. So how should we protect the /dashboard/movies route to ensure that only authenticated and subscribed users can access it? By using a middleware pipeline, you can chain multiple middleware together and ensure that they can run in parallel.

start

First, use the Vue CLI[2] to quickly build a new Vue project.

vue create vue-middleware-pipeline

Install dependencies

Once the project directory is created and installed, change into the newly created directory and run the following command from your terminal:

npm i vue-router vuex

Vue-router[3] — is the official router for Vue.js

Vuex[4] — is a state management library for Vue

Creating Components

Our program will consist of three components.

Dashboard — This component is displayed to logged in users.

Movies — We show this component to users who are logged in and have an active subscription.

Let's create these components. Change to the src/components directory and create the following files: Dashboard.vue, Login.vue, and Movies.vue

Edit the Login.vue file with the following code:

<template>
  <div>
    <p>This is the Login component</p>
  </div>
</template>

Edit the Dashboard.vue file with the following code:

<template>
  <div>
    <p>This is the Dashboard component for authenticated users</p>
    <router-view/>
  </div>
</template>

Finally, add the following code to your Movies.vue file:

<template>
  <div>
    <p>This is the Movies component for authenticated and subscribed users</p>
  </div>
</template>

Create a store

As far as Vuex is concerned, the store is just a container for saving the state of our program. It allows us to determine if the user is authenticated as well as check if the user is subscribed.

In the src folder, create a store.js file and add the following code to it:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: {
            loggedIn: false,
            isSubscribed: false
        }
    },
    getters: {
        auth(state) {
            return state.user
        }
    }
})

The store contains a user object in its state. The user object contains loggedIn and isSubscribed properties, which help us determine whether the user is logged in and has a valid subscription. We also defined a getter in the store to return the user object.

Defining Routes

Before creating routes, you should define them and associate the corresponding middleware that will be attached to them.

/login is accessible to everyone except authenticated users. When an authenticated user visits this route, it should redirect to the dashboard route. This route should have a guest middleware attached to it.

Only authenticated users can access /dashboard. Otherwise the user should be redirected to the /login route when accessing this route. We associate the auth middleware with this route.

Only authenticated and subscribed users can access /dashboard/movies. This route is protected by the isSubscribed and auth middleware.

Creating Routes

Next, create a router folder in the src directory and then create a router.js file in that folder. Edit the file with the following code:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'


Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },

        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies
            }
        ],
        }
    ]
})


export default router

Here, we create a new router instance, passing it a few configuration options as well as a routes property that takes in all of the routes we defined previously. Note that these routes are currently unprotected. We will fix this issue shortly.

Next, inject the routes and store into the Vue instance. Edit the src/main.js file with the following code:

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'

Vue.config.productionTip = false


new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

Creating Middleware

Create a middleware folder in the src/router directory, and then create guest.js, auth.js, and IsSubscribed.js files in that folder. Add the following code to the guest.js file:

export default function guest ({ next, store }) {
    if (store.getters.auth.loggedIn) {
        return next({
           name: 'dashboard'
        })
    }
   
    return next()
   }

The guest middleware checks whether the user is authenticated. If authentication is successful, you will be redirected to the dashboard path.

Next, edit the auth.js file with the following code:

export default function auth ({ next, store }) {
 if (!store.getters.auth.loggedIn) {
     return next({
        name: 'login'
     })
 }

 return next()
}

In the auth middleware, we use the store to check if the user is currently authenticated. Depending on whether the user is already logged in, we either continue with the request or redirect them to the login page.

Edit the isSubscribed.js file with the following code:

export default function isSubscribed ({ next, store }) {
    if (!store.getters.auth.isSubscribed) {
        return next({
           name: 'dashboard'
        })
    }
   
    return next()
   }

The middleware in isSubscribed is similar to the auth middleware. We use the store to check if the user is subscribed. If the user is subscribed, then they can access the expected route, otherwise they are redirected back to the dashboard page.

Protecting Routes

Now that all of our middleware is created, let's use them to protect our routes. Edit the src/router/router.js file with the following code:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'

import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                middleware:
                    guest
                ]
            }
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                middleware:
                    auth
                ]
            },
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies,
                meta: {
                    middleware:
                        auth,
                        isSubscribed
                    ]
                }
            }],
        }
    ]
})

export default router

Here we imported all of our middleware and then defined a meta field for each route that contains an array of middleware. The middleware array contains all the middleware we wish to associate with a particular route.

Vue routing navigation guard

We use the navigation guards[5] provided by Vue Router to protect routes. These navigation guards protect routes by redirecting or canceling them.

One of the guards is the global guard, which is usually a hook called before a route is triggered. To register a global guard, you need to define a beforeEach method on the router instance.

const router = new Router({ ... })
router.beforeEach((to, from, next) => {
 //necessary logic to resolve the hook
})

The beforeEach method receives three parameters:

to: This is the route we intend to access.

from: This is our current route.

next: This is the function that calls the hook.

Running middleware

Using the beforeEach hook we can run our middleware.

const router = new Router({ ...})

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware

    const context = {
        to,
        from,
        next,
        store
    }
    return middleware[0]({
        ...context
    })
})

We first check if the route we are currently processing has a meta field containing a middleware attribute. If the middleware attribute is found, it is assigned to the const variable. Next we define a context object which contains everything we need to pass to each middleware. Then, call the first middleware in the middleware array as a function and pass in the context object.

Try accessing the /dashboard route and you should be redirected to the login route. This is because the store.state.user.loggedIn property in /src/store.js is set to false. Change the store.state.user.loggedIn property to true, and you should be able to access the /dashboard route.

Now the middleware is working, but this is not the way we want it to work. Our goal is to implement a pipeline that can run multiple middlewares for a specific path.

return middleware[0]({ …context} "0")
Notice in the above code block, we only call the first middleware passed from the middleware array in the meta field. So how do we ensure that the other middlewares included in the array (if any) are also called? This is where pipes come in handy.

Create a pipeline

Change to the src/router directory and create a middlewarePipeline.js file. Add the following code to the file:

function middlewarePipeline (context, middleware, index) {
    const nextMiddleware = middleware[index]

    if(!nextMiddleware){
        return context.next 
    }

    return () => {
        const nextPipeline = middlewarePipeline(
            context, middleware, index + 1
        )

        nextMiddleware({ ...context, next: nextPipeline })

    }
}

export default middlewarePipeline

middlewarePipeline has three parameters:

context: This is the context object we created earlier, which can be passed to each middleware in the stack.

middleware: This is the middleware array itself defined on the route's meta field.

index: This is the index of the current middleware to run in the middleware array.

const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}

Here, we are simply pulling out the middleware in the index passed to the middlewarePipeline function. If no middleware is found at index, the default next callback is returned.

return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}

We call nextMiddleware passing the context and then the nextPipeline const. It’s worth noting that the middlewarePipeline function is a recursive function that will call itself to get the next middleware to run in the stack, while increasing index to 1.

Putting it all together

Let's use middlewarePipeline. Edit the src/router/router.js file like the following:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'

import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'
import middlewarePipeline from './middlewarePipeline'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                middleware:
                    guest
                ]
            }
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                middleware:
                    auth
                ]
            },
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies,
                meta: {
                    middleware:
                        auth,
                        isSubscribed
                    ]
                }
            }],
        }
    ]
})

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware
    const context = {
        to,
        from,
        next,
        store
    }

    return middleware[0]({
        ...context,
        next: middlewarePipeline(context, middleware, 1)
    })
})

export default router

Here, we use <code> middlewarePipeline <code> to run subsequent middleware contained in the stack.

return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})

After the first middleware is called, using the middlewarePipeline function, subsequent middleware contained in the stack will also be called until no more middleware is available.

If you access the /dashboard/movies route, you should be redirected to /dashboard. This is because the user is currently authenticated but has no valid subscription. If you set the store.state.user.isSubscribed property in your store to true, you should be able to access the /dashboard/movies route.

Summarize

Middleware is a great way to protect different routes in your application. This is a very simple implementation of using multiple middlewares to protect a single route in a Vue application.

This is the end of this article about learning Vue middleware pipeline in one article. For more relevant Vue middleware pipeline content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!