前端刷新token最佳实践：在请求拦截器中进行过期判断，实现无感刷新

2024-02-11 05:09:25

理解刷新token

在前端开发中，token是一串用于验证用户身份的字符串，它通常存储在本地存储或Cookie中。当用户登录成功后，服务器会颁发一个token给客户端，客户端在后续请求中携带这个token，服务器会根据token来验证用户的身份。

token通常都有一个有效期，一旦过期，用户就会被注销，需要重新登录。为了避免用户在使用过程中突然被注销，需要实现token的刷新机制。刷新token是指在token即将过期之前，向服务器请求一个新的token，并用新的token替换旧的token。

前端刷新token最佳实践

在前端开发中，实现刷新token的最佳实践是使用请求拦截器。请求拦截器是一个在发送请求之前触发的钩子函数，我们可以利用它来拦截每个请求，并在请求头中添加token。

import axios from 'axios';

const requestInterceptor = axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

在上述代码中，我们使用Axios的请求拦截器，在每个请求发送之前，都会检查本地存储中是否有token。如果有token，则将其添加到请求头中。这样，每次向服务器发送请求时，都会自动携带token，服务器可以根据token来验证用户的身份。

token过期处理

在请求拦截器中，我们还需要判断token是否即将过期。我们可以通过设置一个时间戳来记录token的颁发时间，并在每次请求时计算token的剩余有效时间。如果剩余有效时间小于某个阈值，则认为token即将过期，需要刷新token。

const tokenExpirationThreshold = 60 * 30; // 30分钟

const requestInterceptor = axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    const tokenExpirationTime = localStorage.getItem('tokenExpirationTime');
    const now = Date.now();
    const remainingTime = tokenExpirationTime - now;
    if (remainingTime < tokenExpirationThreshold) {
      refreshToken();
    }
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

在上述代码中，我们使用了一个名为tokenExpirationThreshold的常量来设置token的过期阈值，单位是秒。当token的剩余有效时间小于这个阈值时，我们会调用refreshToken()函数来刷新token。

刷新token

刷新token的具体实现方式取决于后端API的设计。一般来说，后端会提供一个刷新token的接口，客户端可以调用这个接口来获取一个新的token。

const refreshToken = () => {
  const refreshToken = localStorage.getItem('refreshToken');
  if (refreshToken) {
    axios.post('/api/refresh-token', { refreshToken })
      .then((response) => {
        const newToken = response.data.token;
        localStorage.setItem('token', newToken);
        localStorage.setItem('tokenExpirationTime', Date.now() + response.data.expiresIn * 1000);
      })
      .catch((error) => {
        // 处理刷新token失败的情况
      });
  }
};

在上述代码中，我们使用Axios发送一个POST请求到/api/refresh-token接口，并携带refreshToken作为请求参数。如果请求成功，我们会收到一个新的token和新的过期时间。我们将新的token和过期时间存储在本地存储中，并使用新的token继续发送请求。

实现客户端无感刷新

通过在请求拦截器中进行过期判断和调用刷新token接口，我们可以实现客户端无感刷新token。这意味着用户在使用过程中不会感知到token的刷新过程，也不会因为token过期而被注销。

注意事项

在实现前端刷新token时，需要注意以下几点：

确保token的存储安全。token是敏感信息，应该使用安全的存储方式，例如本地存储或Cookie。
定期更新token。不要等到token即将过期才刷新，应该在token还有足够剩余有效时间的时候就进行刷新。
处理刷新token失败的情况。如果刷新token失败，应该有相应的处理机制，例如通知用户重新登录。
使用合理的token过期阈值。token过期阈值应该根据具体业务场景来设置，太短的阈值可能会导致频繁的刷新token，而太长的阈值可能会导致token过期后用户被注销。