Middleware on specific page - NuxtJS

Question

Well, I'm starting with nuxt and I have following routes:

/home

/dashboard

/login

I want to protect the /dashboard, but only for users logged in with a token in Cookie.

Then i created a middleware

/middleware/auth.js

import Cookie from 'js-cookie'

export default function({ req, redirect }) {
  if (process.server) {
    if (!req.headers.cookie) return redirect('/login')
    const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('jwt='))
    if (!jwtCookie) return redirect('/login')
  } else {
    const jwt = Cookie.get('jwt')
    if (!jwt) { window.location = '/login' }
  }
}

and register the middleware in my layout or dashboard page

<script>
export default {
  middleware: 'auth',
}
</script>

when I access /dashboard apparently works perfectly

but the problem is that the middleware is being registered globally, it is running on all pages, all routes

So when you access /home that is a published page, if you do not have the cookie, you end up being redirected to login page

anyone help?

it cant happen unless u have set your middleware globally in nuxt.config also — Aldarund, Sep 09 '18 at 17:13
@Aldarund you're right, a simple error, I was not paying attention, I was many hours trying to do this server-side and client-side verification, I ended up sneaking that I had registered in nuxt.config.js, thank you — Yung Silva, Sep 09 '18 at 17:20
Maybe what you need it's to disable the auth middleware in a specific component, page or layout, i will recomend you to check the auth module documentation: https://auth.nuxtjs.org/guide/middleware.html In the example you can set `auth: false` to disable the auth middleware. — Carlos Rodríguez, Jun 09 '20 at 09:11

score 1 · Answer 1 · answered Jan 23 '21 at 09:24

How about creating a condition based on the route.path param ?

export default function({ req, redirect, route }) {

  if (!route.path.includes('dashboard')) { // if path doesn't include "dashboard", stop there
    return;
  }

  if (process.server) {
    if (!req.headers.cookie) return redirect('/login')
    const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('jwt='))
    if (!jwtCookie) return redirect('/login')
  } else {
    const jwt = Cookie.get('jwt')
    if (!jwt) { window.location = '/login' }
  }
}

Therefore you still benefit from the pre-render middleware system.

score 0 · Answer 2 · answered Mar 20 '20 at 13:24

You probably have registered your middleware/auth.js in your nuxt.config.js. When you register a middleware in nuxt.config.js, you're registering it globally, meaning it will be called for every route change.

Docs: https://nuxtjs.org/guide/routing#middleware

Hozhabr · Answer 3 · 2018-09-10T07:23:42.940

In my opinion, you should call them plugin, because of middleware called by each route changed also you can't use middleware in layout and subComponent, you can use it as plugin and call it manually everywhere also it's reactive and runtime.

 path: /plugind/auth.js

 import Cookie from 'js-cookie';

 export default function({ req, redirect }) {
 if (process.server) {
   if (!req.headers.cookie) return redirect('/login')
    const jwtCookie = req.headers.cookie.split(';').find(c => 
    c.trim().startsWith('jwt='))
    if (!jwtCookie) return redirect('/login')
    } else {
    const jwt = Cookie.get('jwt')
   if (!jwt) { window.location = '/login'
   }
  }
 }

Middleware on specific page - NuxtJS

3 Answers3