Vue 2 router in beforeEach localStorage is not defined

Question

Need to do something like middleware, need to check if the user has a token, then allow the transition

router.beforeEach((to, from, next) => {
    const accessNeed = ['Dashboard',]
    if (localStorage.getItem("token")){
        if (!accessNeed.includes(to.name)) {
            next({ name: 'Home' })
        }else{
            next()
        }
    }else{
        next()
    }
})

Possibly that's eslint rules - check out ['window' is not defined in Vue.js 2](https://stackoverflow.com/a/40728493/16791505) — Paolo, Sep 13 '21 at 08:07
Well, `window` is available in the Vue app - unless you are using Nuxt or some other SSR. — Paolo, Sep 13 '21 at 08:16

tho-masn · Accepted Answer · 2021-09-13T08:19:48.390

2

You are either using Nuxt, or just the Vue SSR package. So you have to make sure, the code gets executed only on client:

router.beforeEach((to, from, next) => {
  if (!process.client) {
    next()
    return
  }
    
  const accessNeed = ['Dashboard']

  if (window && window.localStorage.getItem("token")){
    if (!accessNeed.includes(to.name)) {
      next({ name: 'Home' })
    } else{
      next()
    }
  }

  next()
})

edited Sep 13 '21 at 08:19

answered Sep 13 '21 at 08:17

tho-masn

1,126
1
7
13

1

I just zoomed the stack, he's using `vue-server-renderer`. – Paolo Sep 13 '21 at 08:18
Probably should be `if (window && window.localStorage.getItem("token")){` – Paolo Sep 13 '21 at 08:19
Right, this should be bulletproof then. I've added it to the answer – tho-masn Sep 13 '21 at 08:20
yes i am using Vue SSR, thanks a lot, worked – Miqayel Petrosyan Sep 13 '21 at 08:52

Vue 2 router in beforeEach localStorage is not defined

1 Answers1