nuxt.js - How to add a redirection in Nuxt router middleware?

Question

I have created a middleware to check if new user email has been verified middleware/verify_email.js:

export default function (context) {
  if (context.$auth.loggedIn && !context.$auth.user.email_verified_at) {
    console.log('logged in with email not verified');
    return context.redirect('/auth/verify');
  }
}

Then, I have set this middlware globally in nuxt.config.js:

  router: {
    middleware: ['auth', 'verify_email']
  },

But it seems I'm getting an infinite loop, the page in not not responding. It responds again as soon as I comment the redirect line.

NavigationDuplicated: Avoided redundant navigation to current location: "/auth/verify".

I probably need to add an exception to this middleware for the page auth/verify but I can't figure out how.

Any idea how I should fix this issue ?

Answer 1

I already did a similar auth middleware in Nuxt.js

You have to skip the middleware if you are on the '/auth/verify' route, as follows:

export default function (context) {

  if (context.route.name === "auth-verify")
    // skip middleware
    return
  }

  if (context.$auth.loggedIn && !context.$auth.user.email_verified_at) {
    console.log('logged in with email not verified');
    return context.redirect('/auth/verify');
  }
}