Как поддерживать сеанс входа в систему активным даже после обновления страницы в Vuejs?

#javascript #vue.js #local-storage #commercetools

Вопрос:

 signInMe() {
 
      this.$store.dispatch('setLoggedUser', true);
      this.$store.dispatch('setGenericAccessToken', response.data.access_token);

     
      this.errorMessage = "";
    }, (error) => {
      if (error) {
        this.errorMessage = error.response.data.message;
        this.isLoginFailed = true;
        this.emailFailureCount = this.emailFailureCount   1;
       
      }
    }).catch(error => {})
}, 
 logout() {
  localStorage.clear();
  localStorage.setItem('userType', "G");
  this.$store.dispatch('setLoggedUser', false);
  this.$store.dispatch('setAccessToken', '');
  this.$router.push('/')
  this.registeredUser = false;
}, 
 <div class="myprofileroute" @click="logout">Logout</div> 

После успешного входа в систему с моими учетными данными я могу перенаправить на какую-либо страницу, и если я нажму на выход, я успешно выйду из системы, но проблема даже после входа в систему без нажатия кнопки выхода, даже если я обновлю свою страницу, она выходит из системы.

Комментарии:

1. Какую систему аутентификации вы используете? Джей Ти?

2. @Areg, использующий CommerceTool

3. Как выглядит ваш метод входа в систему?

4. @egx я поделился своим кодом метода входа в систему.

Ответ №1:

Попробуйте установить маркер доступа в локальном хранилище/хранилище сеансов, а затем при каждой загрузке страницы проверяйте, существует ли он или нет.

 async login(){
  try{
    const userData = await axios.post('yourapi');
    const token = userData.access_token;
    localStorage.setItem('userData', userData);
    localStorage.setItem('accessToken', token);
    this.$router.push('/dashboard');
  }catch(err){
     //Handle errors
  }
}
 

Тогда, возможно, на вашем основном макете или на экземпляре Vue

 mounted(){
  const userData = localStorage.getItem('userData');
  const accessToken = localStorage.getItem('accessToken');
  localStorage.setItem('userType', "G");
  this.$store.dispatch('setLoggedUser', userData);
  this.$store.dispatch('setAccessToken', accessToken);
}
 

Комментарии:

1. @taneerudhanunjay я вижу, что вы уже установили новую логику в функции входа в систему, все, что вам нужно сделать сейчас, это проверять каждое обновление, существует ли этот токен, и проверять его