how to disable middleware in specific page, nuxt middleware

Question

i have declare a middleware that check role of every routes in nuxt.config.js. but want to disable in some pages.

// in nuxt.config.js =>        
        router: {
            middleware: ['role']
          },
        
        
        
 // in middleware/role.js =>     
        export default function ({app}) {
          if (!window.localStorage.getItem('auth.token')) {    
            //app.router.push('/auth/login');   
            console.log('middleware');
          }
        }
        
        
 // in login.vue =>     
            export default {
                role: false,
              }
    
    
 // in root page =>
        export default { 
          role: false,               
          middleware({app}){
            if (!window.localStorage.getItem('auth.token')) {
              app.router.push('/auth/login');
            }
          },    
      }

when token is empty and redirect user, the page is loading again and again so i comment this redirect and console log a message, to check what happen. this role middleware is loading on that page where the role middleware is set to false. check the image below.

here you can see middleware printed twice, one for root('/') and another one for login page (here i disabled role middleware). how to disable this middleware to this login page.

Wyattwyche

you can check route.path in middleware and return if this variable equal your path. – Tuberculate

Answer 1

You can use this

middleware({ route }) {
  if (!['do-not-run-here', 'public-page', 'index'].includes(route.name)) return

  // all your cool code here
  console.log('passed')
},

You can have some quick return in case this is a page you don't want to have a middleware. In my example, we do check the name of the route, and if it's do-no-run-here, public-page or index the middleware is simply not executed there.
Of course, setting a name prop is good if you want to be sure of the name of the page.

On all the other ones, the middleware will run perfectly fine. There is no middleware: false if it's what you were looking for.

---

An alternative solution would be to use a specific layout for some pages, with the middleware on it. And not use this one for the pages you don't want to have the middleware on.

Engender

can u please explain more or use example code.. we should use your code in nuxt config or in specific page that this guy mention it ? – Mouth

@ArianFm the snippet of code can be used where you want. It could be a .vue page, could be a global middleware, "classic" middleware that you use per component. I didn't make it more specific because it's depends of your use case. – Engender

im using nuxt auth and my middleware looks like this (in nuxt.config.js): router:{ middleware:['auth'] }, – Mouth

@ArianFm if you're trying to disable the nuxt auth middleware in specific pages, you can use the following: auth.nuxtjs.org/guide/middleware Also, feel free to open a new question. I'm not sure this is the exact same question OP asked here. – Engender

youre amazing thanks for your guide , i cant believe didnt see that part of middleware document :D – Mouth

Answer 2

Thank you Sourav and Kissu, this thread helped me accomplish something similar in my Nuxt 3 project. I used a variation of your idea to exclude routes on server middleware.

May it help a future adventurer who finds their way to this place

// ~/server/middleware/auth.ts

import type { IncomingMessage, ServerResponse } from "http";
// other imports

export default async (req: IncomingMessage, res: ServerResponse) => {
  const reqUrl = req.url;

  /**
   * Public Endpoints
   *
   * /api/ routes explicitly excluded from this auth middleware
   */

  if (req.url.includes("api/example")) return;

Wagon

Answer 3

Here is how you can filter page in Nuxt 3 global middleware

export default defineNuxtRouteMiddleware(
  (to, from) => {
    // you can use params to & from of middleware to check like this
    if (['demo'].includes(to.name as string)) {
      return // here this middleware will not execute anything with specific routes in the array.
    }
  })

Hope this help.

Lethalethal