Middleware

Middleware is a built-in NuxtJS mechanism.

When modifying the routing operation, you had to change the middleware mechanism.

Middleware will be called for every route change but it can be divided into two types.

Global middleware

This type of middleware will be called for every route change.

To use middleware that will run globally you need to create a middleware directory in the module and add a file that will end with .global.js suffix.

Global middleware has access to the full context.

Example path: @Core/middleware/privilegeRoutingCheck.global.js

export default ({
    route, app, error, store,
}) => {
    const {
        meta: {
            privileges = [],
        },
    } = route;

    if (store.state.authentication.token
      && store.state.authentication.user) {
        if (privileges.length
            && !app.$hasAccess(privileges)) {
            error({
                statusCode: 403,
            });
        }
    }
};

Local middleware

This type of middleware will be run on specific routing related with page routes.

Helpers

VueMS has generated an 'routerHelper.modules' file that exports the necessary methods. The file is generated at the start of the nuxt server and is placed in a temporary folder .nuxt.

Full path ~/.nuxt/routerHelper.modules.

setLocalMiddlewares()

Is a method that searches for local middleware and runs it sequentially on a specific routing.

The context transferred to the local middleware is determined by the setLocalMiddlewares method in the router.js file.

import Vue from 'vue';
import Router from 'vue-router';

import {
    setLocalMiddlewares,
} from '~/.nuxt/routerHelper.modules';

export function createRouter() {
    const router = new Router({...});

    router.beforeEach(
        (to, from, next) => setLocalMiddlewares({
            to,
            from,
            next,
        }),
    );

    return router;
}

Usage

To add local middleware you need to add the appropriate entry to the routing of the page on which you want to run middleware. You have to put it in the meta property as middleware array property.

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

    return next()
  }

  import {
      Icons,
      Pages,
  } from './imports';

  import auth from '@Dashboard/middleware/auth';

  export const ROUTE_NAME = {
      DASHBOARD: 'dashboard',
  };

  export default [
      {
          name: ROUTE_NAME.DASHBOARD,
          path: '/dashboard',
          component: Pages.Dashboard,
          meta: {
              middleware: [
                  auth,
              ]
          },
      },
  ];