巧用Vue拦截器，轻松处理token过期问题

2023-12-14 18:09:21

使用 Vue.js 拦截器优雅地处理令牌过期

简介

令牌在保护网络应用程序中的用户隐私和数据安全方面发挥着至关重要的作用。但是，令牌通常有时间限制，当它们过期时，依赖它们的请求就会失败。为了防止这种情况发生，前端应用程序需要实现令牌过期处理机制。本文将指导您如何在 Vue.js 中使用拦截器优雅地处理令牌过期。

什么是拦截器？

拦截器是用于拦截应用程序中请求和响应的机制。通过使用拦截器，我们可以修改请求或响应，或者在请求到达服务器或响应返回之前或之后执行某些操作。

使用拦截器处理令牌过期

为了处理令牌过期，我们将创建一个拦截器，在请求发送之前拦截它。在拦截器中，我们将检查请求头中是否存在令牌。如果没有令牌或令牌已过期，我们将暂停请求并刷新令牌。

刷新令牌

在令牌过期后，我们需要刷新它。我们可以通过向服务器发送请求来实现。在请求中，我们将包含过期的令牌，以便服务器识别并生成一个新的令牌。

继续请求

刷新令牌成功后，我们将继续发送先前暂停的请求。此时，请求头将包含新的令牌，因此服务器将能够验证请求。

示例代码

以下代码展示了如何在 Vue.js 中使用拦截器来处理令牌过期：

import axios from 'axios';

// 创建拦截器
const tokenInterceptor = axios.interceptors.request.use(config => {
  // 获取请求头中的令牌
  const token = config.headers.Authorization;

  // 判断令牌是否存在或是否过期
  if (!token || isTokenExpired(token)) {
    // 令牌过期，暂停请求
    return Promise.reject('Token expired');
  }

  // 令牌有效，继续发送请求
  return config;
}, error => {
  // 处理拦截器错误
  return Promise.reject(error);
});

// 刷新令牌
const refreshToken = async () => {
  const response = await axios.post('/api/auth/refresh-token', {
    refreshToken: localStorage.getItem('refreshToken'),
  });

  // 存储新的令牌
  localStorage.setItem('token', response.data.token);
  localStorage.setItem('refreshToken', response.data.refreshToken);

  // 重新发送暂停的请求
  tokenInterceptor();
};

// 判断令牌是否过期
const isTokenExpired = (token) => {
  // 从令牌中提取过期时间
  const expirationDate = new Date(token.split('.')[1]).getTime();

  // 判断令牌是否已过期
  return Date.now() > expirationDate;
};