Токен VueJS очищается с помощью vue-router до каждого - PullRequest
Новая
       10

Токен VueJS очищается с помощью vue-router до каждого

1 голос
/ 17 мая 2019

У меня есть приложение VueJS с каркасом Vuetify, которое подключается к бэкэнду Java Jhipster.

Я использовал Vuex для хранения токена аутентификации пользователя с помощью этого учебника , хранящего токен на localStorage.

Моя проблема заключается в том, что всякий раз, когда я дублируюВкладка, над которой я работаю, функция beforeEach запускается дважды и очищает токен при втором выполнении и направляет на страницу входа, то же самое применимо, если я закрываю вкладку и пытаюсь открыть ее снова.

Здесьмой код, когда пользователь входит в систему store.js: 

login({commit}, user){
  return new Promise((resolve, reject) => {
    commit('auth_request');
    axios({
        method: 'POST',
        url: api.AUTHENTICATE, 
        data: user, 
    })
    .then(response => {
      const token = response.data.id_token;
      localStorage.setItem('token', token)
      axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
      commit('auth_success', token);
      resolve(response)
    })
    .catch(error => {
      commit('auth_error')
      localStorage.removeItem('token')
      reject(error)
    })
  });
},

, тогда мой код в main.js для проверки наличия токена: 

Vue.prototype.$http = Axios;
const token = localStorage.getItem('token')
if (token) {
    console.log("token exists")
  Vue.prototype.$http.defaults.headers.common['Authorization'] = token;
}
else{
    console.log("no token");
}

the beforeEachфункция в vue-router: 

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

  let currentUser = store.getters.isLoggedIn;
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  console.log("to: "+to.path+" user: "+currentUser+ " auth: "+requiresAuth);

  if (requiresAuth && currentUser){
    console.log("logged: "+store.state.token);
    next();
  }
  else if (requiresAuth && !currentUser){
    console.log("not logged: "+store.state.token);
    next('/login');
  }
  else if (!requiresAuth && currentUser){
    console.log("rediect: "+store.state.token);
        next('/dashboard');
  }
    else{
    console.log("exception")
    next();
    } 
})

При каждом входе в приложение я получаю маркер и перенаправляем на страницу панели инструментов: 

to: /dashboard user: true auth: true
logged: eyJhbGciOiJ....

, но при дублировании вкладки или закрытиии снова откройте вкладку: я получаю это: 

token exists
to: /dashboard user: true auth: true
logged: eyJhbGciOiJIUzUxM...
to: /login user: false auth: false
exception

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

...