Vue SSR - Маршрутизатор перед каждой охраной - PullRequest
Новая
       28

Vue SSR - Маршрутизатор перед каждой охраной

0 голосов
/ 21 ноября 2018

Я пытаюсь настроить несколько промежуточных программ на Vue Routes с beforeEach перехватчиками.

Вот промежуточное ПО login, которое декодирует токен из 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));
}

Вот промежуточное программное обеспечение, которое фактически защищает маршруты: 

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();

  })
}

Вот моя проблема:

Всякий раз, когда я вхожу в свое приложение, все работает нормально, за исключением случаев, когда я непосредственно посещаю страницу /login, мои состояния VuexОказывается, undefined позволяет мне получить доступ к странице, несмотря на наличие токена в localStorage.

Это происходит для всех noAuth охранников.

После долгих попыток отладки,Я узнал, что это потому, что Vue больше не будет запускать промежуточное ПО при непосредственном посещении URL.Более того, меня перенаправляли туда и обратно /login при попытке перейти на любую страницу requiresAuth напрямую.

Поскольку мой код содержит следующие строки: 

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

Мой сервер можетне проверяйте токен и не используйте его для состояний Vuex.

Есть ли способ избежать ненужных перенаправлений и заставить Vuex работать, когда я посещаю страницы напрямую?

Предложения будут оценены!

Заранее спасибо

...