OAuth2前端如何监听令牌过期

创作时间:

作者:

@小白创作中心

OAuth2前端如何监听令牌过期

引用

来源

https://docs.pingcode.com/baike/2245483

OAuth2前端如何监听令牌过期：定期轮询、使用浏览器存储、捕获错误响应、使用拦截器。其中，使用拦截器是一种有效且常用的方式，能在请求发出前或响应返回后进行统一处理。通过拦截器，可以在令牌过期时自动触发刷新令牌的逻辑，确保用户体验不受影响。

OAuth2是一种用于授权的开放标准，广泛用于保护API和Web应用的安全。前端需要有效地监听令牌的过期，以确保用户体验和应用的安全性。以下将详细介绍如何在前端实现这一目标。

一、定期轮询

定期轮询是一种常见的令牌管理方法，通过定时器定期检查令牌的有效性，并在令牌即将过期时刷新它。

设置定时器：在用户登录成功后，启动一个定时器，根据令牌的有效期设置检查间隔。
检查令牌有效性：在每次定时器触发时，检查令牌的剩余有效时间。如果时间不足，则触发刷新令牌的逻辑。
刷新令牌：调用后端API刷新令牌，并更新定时器的检查时间。

这种方法简单直接，但缺点是增加了前端的复杂性和网络请求的频率。

二、使用浏览器存储

浏览器存储（如LocalStorage或SessionStorage）可以用于存储令牌及其过期时间，并在每次请求时检查令牌的有效性。

存储令牌信息：在用户登录成功后，将令牌及其过期时间存储在浏览器存储中。
检查令牌过期：在每次发送请求前，从浏览器存储中读取令牌的过期时间。如果已过期，则触发刷新令牌的逻辑。
刷新令牌：调用后端API刷新令牌，并更新浏览器存储中的令牌信息。

这种方法减少了定时器的使用，但需要在每次请求前进行检查。

三、捕获错误响应

捕获错误响应是通过拦截HTTP响应中的错误状态码来判断令牌是否过期。

拦截HTTP响应：在前端代码中使用拦截器（如Axios拦截器）拦截所有HTTP响应。
判断错误状态码：在拦截器中检查响应的状态码，如果是401（未授权）或其他与令牌过期相关的状态码，则触发刷新令牌的逻辑。
刷新令牌：调用后端API刷新令牌，并重新发送失败的请求。

这种方法无需定时检查，且能在令牌过期时即时响应。

四、使用拦截器

使用拦截器是一种更为高级且有效的方法，通过拦截器可以在请求发出前或响应返回后进行统一处理。

配置请求拦截器：在前端代码中配置请求拦截器（如Axios的请求拦截器），在每次请求发出前检查令牌的有效性。
配置响应拦截器：在前端代码中配置响应拦截器（如Axios的响应拦截器），在每次响应返回后检查是否存在令牌过期的错误。
刷新令牌并重试请求：在响应拦截器中，如果检测到令牌过期的错误，则调用后端API刷新令牌，并使用新的令牌重试失败的请求。

这种方法集成度高，能统一管理令牌的有效性，减少重复代码。

五、示例代码

以下是使用Axios拦截器实现令牌过期监听的示例代码：

import axios from 'axios';

// 创建Axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    return response;
  },
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = localStorage.getItem('refresh_token');
      const response = await axios.post('https://api.example.com/token/refresh', { refresh_token: refreshToken });
      localStorage.setItem('access_token', response.data.access_token);
      axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.access_token}`;
      return axiosInstance(originalRequest);
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;