Access LocalStorage in Middleware - 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 localStorage.

The simplest way I thought of doing this was by creating a /middleware/auth.js

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

and registering it in the /dashboard/index.vue component.

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

But I cannot access localStorage within a middleware, because LocalStorage is client-side.

I have already tried to add this same check in the created() dashboard layout, but I cannot return window not set mounted() is too late, it can only check after the page has been fully assembled.

So how can I achieve this? Note: I do not intend to use any Vuex for this project.

Solution 1

I used cookie-universal-nuxt

On vuex store for login action I set a commit with the token

window.$cookies.set('token', payload, {
    path: '/',
})

and access it in middleware as middleware/auth.js

export default (context) => {
    if (!context.app.$cookies.get('token')) {
        return context.redirect('/login')
    }
}

Solution 2

For anyone not satisfied storing the information in cookies, here's me solution:

I've been having a lot of problems with this and I were not satisfied setting a cookie. If you are running Nuxt and haven't told it to run in spa mode it will run in universal mode. Nuxt defines universal mode as:

Isomorphic application (server-side rendering + client-side navigation)

The result being that localStorage is not defined serverside and thus throws an error.

The give away for me was that console logging from middleware files and Vuex outputted to terminal and not the console in developer tools in the browser.

The solution for me was to change the mode to spa in the nuxt.config.js which is located at the root.

Please notice that you can still access localStorage, running universal mode, in page files and components because they are not server side.

Middleware files are, in universal mode, run server side, so changing to spa mode makes them run client side and thus allows them access to localStorage.

For more information about Nuxt modes, read these:

• https://nuxtjs.org/guide/
• https://recurse.me/posts/choosing-a-nuxt-mode.html

Comments

[Yung Silva]

I did not find ways to use examples, or documentation

[Aldarund]

@YungSilva yes, it don`t exist yet. Sources are way to go.The point is that you need to either use cookies or to use other thing than middleware -> see this issue for problems and some workaround github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837

[dvlden]

This is actually very decent module. I just used it in one of my projects and it works really well.