Vue, jwt refresh token

Question

Cześć,

mam pytanie odnośnie odświeżania tokenu jwt w vue.js Sam token mam ustawiony czas życia na 24h, po tym czasie token wygasa jednak po stronie front'u nic się nie dzieje. Mam też endpoint który służy do odświeżania tokena. Chciałbym aby kiedy token wygasa token podjął próbę odświeżenia a jeśli ona się nie powiedzie usunął token z localStorage

Answer 1

No dobra masz kilka wyjść ale najpopularniejsze to trzymanie na FE czasu trwania tokenu np w localStore i wolanei endpointa kiedy czas się skończy. Inną opcją którą ja polecam jest korzystanie np z biblioteki axios w celu komunikacji z serwerem. W axiosie możesz zaimplementować interceptor, który po wyłapaniu błędu o wygaśnięciu tokenu wyśle zapytanie o nowy token.

Comments

właśnie używam axios, dodałem prosty interceptor

let jwtToken = localStorage.getItem('token');
if (jwtToken){
  setHeaderToken();
  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (error.response.status === 401) {
      refreshToken();
    }
  })
  if (localStorage.getItem('token') === undefined) {
    localStorage.removeItem('token');
    localStorage.removeItem('userId');
    localStorage.removeItem('darkMode');
    window.location.reload();
  }
}

function setHeaderToken() {
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
}

function refreshToken() {
  axios.post('refresh-token')
    .then((data) => {
      localStorage.setItem('token', data.data.access_token);
      setHeaderToken();
    })
    .catch(() => {
      localStorage.removeItem('token');
      localStorage.removeItem('userId');
      return this.$router.push({path: '/'});
    })
}

ale nie do końca to działa :/

---

Nie wiem co tam masz nie tak ponieważ nie mam twojego API. powstawiaj sobie consol.logi i debuguj co jest nie tak. Ja używam quasara (framework do vue) i tam mam taki fragment

export default ({Vue, router}) => {
  Vue.prototype.$axios = axios
  axios.defaults.baseURL = process.env.API;

  axios.interceptors.response.use(function (response) {
    return response
  }, function (error) {
    const errorCode = error.response.status;
    if (errorCode === 401 || errorCode === 403) {
      localStorage.removeItem('accessToken');
      router.push('/login');
    }
    return Promise.reject(error)
  })
}