vue jwt 前端如何续期

在Vue应用中使用JWT进行前端续期的核心方法有：实现自动刷新、使用拦截器处理过期令牌、设置合理的令牌有效期、使用Refresh Token。其中，实现自动刷新是最为关键的，可以确保用户在进行操作时不会因为令牌过期而被强制登出。下面将详细描述实现自动刷新的步骤。

实现自动刷新：为了在Vue应用中实现JWT的自动刷新，可以使用Axios拦截器来捕捉请求错误，当发现令牌过期时，自动触发刷新令牌的请求。这个过程通常包括以下几个步骤：

捕获请求错误：在Axios中设置一个拦截器，捕捉所有请求的响应错误。如果错误状态码是401（未授权），则说明令牌已经过期。
刷新令牌：当捕捉到401错误时，发送一个请求到后台刷新令牌的接口，获取新的令牌。
重新发送原请求：使用新的令牌重新发送原本失败的请求，以确保用户的操作不会受到影响。

接下来，我们将详细介绍如何实现这一系列步骤。

一、设置Axios拦截器

在Vue应用中，我们可以使用Axios拦截器来捕捉所有HTTP请求的响应错误，并进行相应的处理。

import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});
axiosInstance.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const newToken = await refreshToken();
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
      originalRequest.headers['Authorization'] = 'Bearer ' + newToken;
      return axiosInstance(originalRequest);
    }
    return Promise.reject(error);
  }
);
export default axiosInstance;

二、实现刷新令牌的功能

当捕捉到401错误时，我们需要实现一个功能来刷新令牌。通常情况下，这个功能会向后台发送一个请求，并返回新的令牌。

import axios from 'axios';
const refreshToken = async () => {
  try {
    const response = await axios.post('https://api.example.com/refresh-token', {
      token: localStorage.getItem('refreshToken'),
    });
    const { token } = response.data;
    localStorage.setItem('token', token);
    return token;
  } catch (error) {
    console.error('Failed to refresh token', error);
    // Optionally handle token refresh failure (e.g., redirect to login)
    return null;
  }
};

三、使用拦截器处理过期令牌

我们已经在Axios拦截器中添加了处理过期令牌的逻辑。当令牌过期时，拦截器会自动调用refreshToken方法，获取新的令牌并重新发送失败的请求。

四、设置合理的令牌有效期

为了减少令牌过期带来的影响，建议在后端设置合理的令牌有效期。通常情况下，令牌的有效期不宜过短，以免频繁触发刷新操作；也不宜过长，以保证安全性。

五、使用Refresh Token

在JWT认证体系中，除了Access Token外，通常还会使用Refresh Token。Refresh Token的有效期一般较长，可以用于获取新的Access Token。在前端保存Refresh Token，并在令牌过期时使用它来获取新的Access Token，可以有效延长用户会话的有效期。

const refreshToken = async () => {
  try {
    const response = await axios.post('https://api.example.com/refresh-token', {
      token: localStorage.getItem('refreshToken'),
    });
    const { token, refreshToken } = response.data;
    localStorage.setItem('token', token);
    localStorage.setItem('refreshToken', refreshToken);
    return token;
  } catch (error) {
    console.error('Failed to refresh token', error);
    // Optionally handle token refresh failure (e.g., redirect to login)
    return null;
  }
};

六、集成到Vue应用中

最后，将上述实现集成到Vue应用中，使其在应用启动时生效。可以在Vue实例的创建阶段初始化Axios拦截器，并确保令牌刷新功能正常工作。

import Vue from 'vue';
import App from './App.vue';
import axiosInstance from './axios';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
  created() {
    axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  },
}).$mount('#app');

七、使用项目管理系统

在实际开发中，合理的项目管理系统能够极大地提升团队协作和开发效率。对于研发项目管理，PingCode是一款优秀的选择，它专注于研发项目的管理，支持敏捷开发、需求管理、缺陷管理等功能。而对于通用的项目协作，Worktile则是一个不错的选择，它提供了任务管理、时间管理、团队协作等多种功能，适用于各种类型的项目。

总结

通过在Vue应用中使用Axios拦截器捕捉请求错误、实现刷新令牌功能、设置合理的令牌有效期以及使用Refresh Token，可以有效地实现JWT的自动续期，确保用户的操作不受令牌过期的影响。合理地使用项目管理系统，如PingCode和Worktile，可以进一步提升团队的开发效率和协作体验。