How do I implement token refresh in Vue.js?

How do I implement token refresh in Vue.js?

To implement token refresh in Vue.js, you can use an interceptor with Axios to handle expired tokens.

Can you show me a code example for that?

Sure! Here's a basic example:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
});

apiClient.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const { data } = await apiClient.post('/refresh-token');
      localStorage.setItem('token', data.token);
      apiClient.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
      return apiClient(originalRequest);
    }
    return Promise.reject(error);
  }
);

This code checks for a 401 error and attempts to refresh the token.

What if the refresh token also expires?

If the refresh token expires, you should redirect the user to the login page and prompt them to log in again.