vue 什么时候刷新token

在Vue应用中，需要在以下几种情况下刷新token：1、token即将过期时；2、用户主动请求刷新token；3、后端返回token无效或过期信息时。这些情况确保用户的会话保持有效，同时提升安全性和用户体验。

一、TOKEN 即将过期时

当用户登录时，后端通常会返回一个token，并告知其有效期。前端可以在接收token时计算出其过期时间，并在token即将过期前进行刷新。这通常通过设置一个定时器实现。

例如，假设token的有效期为一小时，那么在登录成功后，可以设置一个45分钟的定时器：

setTimeout(() => {
  refreshToken();
}, 45 * 60 * 1000);

这种方式可以确保用户在token过期前自动获得一个新的token，而不会因为token过期而突然失去访问权限。

二、用户主动请求刷新token

在某些情况下，用户可能希望主动刷新token。这可以通过提供一个按钮或某些交互来实现。当用户点击按钮时，前端可以发起一个请求到后端以获取新的token。

methods: {
  onRefreshToken() {
    this.$axios.post('/api/refresh-token').then(response => {
      this.token = response.data.token;
      // 重置定时器
      this.setTokenExpiration(response.data.expiresIn);
    });
  }
}

这种方式可以为用户提供更多的控制权，确保他们的会话在需要时可以被手动刷新。

三、后端返回token无效或过期信息时

当后端返回一个token无效或过期的响应时，前端需要捕捉到这个信息并进行相应的处理。这通常在每个API请求的响应处理中进行拦截。

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // token无效或过期
      return refreshToken().then(newToken => {
        // 重新发起之前失败的请求
        error.config.headers['Authorization'] = `Bearer ${newToken}`;
        return axios.request(error.config);
      });
    }
    return Promise.reject(error);
  }
);

这种方式确保即使token过期，用户的操作也不会中断，前端会自动处理token的刷新并重新发起请求。

四、刷新token的实现细节

刷新token的具体实现可以根据实际需求和后端API设计进行调整。以下是一些常见的实现细节：

存储token：前端需要安全地存储token，通常使用localStorage、sessionStorage或Vuex。
发送刷新请求：前端发送刷新请求时，需要携带当前的token或refresh token。
处理刷新响应：刷新成功后，前端需要更新本地存储的token并重新设置定时器。

methods: {
  refreshToken() {
    return this.$axios.post('/api/refresh-token', { token: this.token }).then(response => {
      this.token = response.data.token;
      this.setTokenExpiration(response.data.expiresIn);
      return response.data.token;
    });
  },
  setTokenExpiration(expiresIn) {
    setTimeout(() => {
      this.refreshToken();
    }, (expiresIn - 600) * 1000); // 提前10分钟刷新
  }
}

五、实例说明

假设我们有一个Vue应用，用户登录后会获取一个有效期为1小时的token，并且需要在token即将过期时刷新。以下是一个完整的示例：

new Vue({
  data: {
    token: '',
    tokenExpiration: null
  },
  methods: {
    login() {
      this.$axios.post('/api/login', { username, password }).then(response => {
        this.token = response.data.token;
        this.setTokenExpiration(response.data.expiresIn);
      });
    },
    refreshToken() {
      return this.$axios.post('/api/refresh-token', { token: this.token }).then(response => {
        this.token = response.data.token;
        this.setTokenExpiration(response.data.expiresIn);
        return response.data.token;
      });
    },
    setTokenExpiration(expiresIn) {
      this.tokenExpiration = Date.now() + expiresIn * 1000;
      setTimeout(() => {
        this.refreshToken();
      }, (expiresIn - 600) * 1000); // 提前10分钟刷新
    }
  },
  mounted() {
    if (this.token && this.tokenExpiration) {
      const expiresIn = (this.tokenExpiration - Date.now()) / 1000;
      if (expiresIn > 0) {
        this.setTokenExpiration(expiresIn);
      } else {
        this.refreshToken();
      }
    }
  }
});

总结

在Vue应用中，刷新token的关键时刻包括：1、token即将过期时；2、用户主动请求刷新token；3、后端返回token无效或过期信息时。通过合理地设计token刷新机制，可以确保用户的会话保持有效，提高应用的安全性和用户体验。为了实现这一点，需要结合使用定时器、用户交互和API响应拦截等技术手段。在实际应用中，根据具体需求和后端API设计灵活调整刷新逻辑，从而达到最佳效果。