Cfrgtkky

I'm trying to setup multiple middlewares on Vue Routes with beforeEach hooks.

Here's a middleware login which decodes the token from localStorage:

export default function login (router, store) {



    router.beforeEach((to, from, next) => {



      if(typeof localStorage === 'undefined')

        next();



      else {

        let token = localStorage.getItem('token');



        if (token) {

          let user = parseJWT(token)



          const stores = [

            store.dispatch('user/userState', {token: token, userId: user.id}),

            store.dispatch('userProfile/userProfile', {avatar: user.avatar, username: user.username}),

            store.dispatch('userProfile/userEmail', user.email),

          ]



          Promise.all(stores)

            .then(() => {

              next()

            })

        }

        else

          next()

      }



    })



}



function parseJWT (token) {

  let base64Url = token.split('.')[1];

  let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');

  return JSON.parse(window.atob(base64));

}

Here's the middleware which actually guards routes:

export default function authorizationRequired (router, store) {

  router.beforeEach((to, from, next) => {



    let requiresAuth = to.matched.some(record => record.meta.requiresAuth);



    let noAuth = to.matched.some(record => record.meta.noAuth);



    let login = store.getters['user/isLoggedIn'];



    console.log('login: ', login)





    if (requiresAuth) {



      if (login) {

        next();

      }

      else {

        next({path: '/login'})

      }

    }

    else if (noAuth) {



      if(!login) {

        next ();

      }

      else {

        next({path: '/'})

      }



    }

    else

      next();



  })

}

Here's my problem:

Whenever I login into my application, everything works fine except when I visit /login page directly, my Vuex states turns out to be undefined allowing me to access page despite having a token in localStorage.

This happens for all the noAuth guards.

After a lot of debugging efforts, I found out that it's because Vue won't execute middlewares again if visiting URL directly. And moreover, I was being redirected to and fro /login when trying to visit any requiresAuth page directly.

Since my code contains the following lines:

if(typeof localStorage === 'undefined') //localStorage won't work server side

        next();

My server can't check for token and use it for Vuex states.

Is there any way to avoid unnecessary redirects and make Vuex work whenever I visit pages directly?

Suggestions will be appreciated!

Thanks in Advance