NuxtJS route middleware for specific routes

Question

I want to protect certain routes to be only available when a user is logged in. The way I want to do this is make a API call to verify the current token.

The token can be either in Local storage or the store (VueX).

I created a middleware called auth.js in the middleware folder and added it to the nuxt.config.js file.

export default function ({ store, redirect }) {
  if (!process.client && !store.getters['user/getUserToken']) {
    return redirect('/login')
  }
}

The problem I have now is that process.client is ignored and this code is fired on the server (SSR) and thus results in an error "localStorage is not defined".

I have been trying to get this working for three days now, so hopefully someone can explain to me how to get this working.

What I want to achieve is that I am able to make a API request BEFORE the page is loaded to verify the user his token. The token can be stored in either the VueX store or localstorage. So I need to have access to both.

Hope someone can help me out on how to get this working.

FYI I am using the fetch method and not Axios or something like that. Using Axios is, for this project, not an option because we would need to refactor to much.

score 0 · Accepted Answer · answered Jul 07 '21 at 08:33

If you're not using nuxt/auth but a homemade solution, you can still get inspired by my answer here: https://stackoverflow.com/a/68175140/8816585

My global.js middleware is complementary to the auth one (from nuxt/auth) but the logic can be done in the same way there too.

Some takeaways:

a middleware is always run before your page is rendered, hence you are not obliged to do this on the server, the verification will still happen before the content is visible
prefer using a cookie rather than localStorage, more secure and available on both server and client
using either axios or fetch is not a big deal IMO because they basically do the exact same thing (overall)
axios can be renamed into fetch, especially if you have a generic configurable file, a bit hacky but requires less maintenance IMO

NuxtJS route middleware for specific routes

1 Answers1