在react应用程序中访问令牌过期后自动注销

在React应用程序中，访问令牌过期后自动注销是一个常见的需求，以确保用户在会话失效时能够及时得到通知并被重定向到登录页面。以下是实现这一功能的基础概念和相关步骤：

基础概念

访问令牌（Access Token）：用于验证用户身份并授权访问受保护资源的短生命周期令牌。
刷新令牌（Refresh Token）：用于获取新的访问令牌的长生命周期令牌。
JWT（JSON Web Token）：一种开放标准（RFC 7519），用于在网络应用环境间安全地传输信息。

实现步骤

1. 存储令牌

通常将访问令牌存储在localStorage或sessionStorage中，而刷新令牌可以存储在更安全的地方，如HTTP-only cookie。

// 存储令牌
localStorage.setItem('access_token', accessToken);
document.cookie = `refresh_token=${refreshToken}; path=/; secure; samesite=strict`;

2. 设置拦截器

使用Axios或其他HTTP客户端库设置拦截器，在每次请求前检查访问令牌是否有效。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

api.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

3. 处理401未授权响应

当服务器返回401状态码时，尝试使用刷新令牌获取新的访问令牌。

api.interceptors.response.use(response => {
  return response;
}, async error => {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    try {
      const refreshToken = getCookie('refresh_token');
      const { data } = await axios.post('/auth/refresh-token', { refresh_token: refreshToken });
      localStorage.setItem('access_token', data.access_token);
      originalRequest.headers.Authorization = `Bearer ${data.access_token}`;
      return api(originalRequest);
    } catch (refreshError) {
      // 刷新令牌失败，清除所有令牌并重定向到登录页面
      localStorage.removeItem('access_token');
      document.cookie = 'refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; secure; samesite=strict';
      window.location.href = '/login';
      return Promise.reject(refreshError);
    }
  }
  return Promise.reject(error);
});

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

4. 定时刷新令牌

为了防止用户在长时间操作过程中令牌过期，可以定时刷新访问令牌。

setInterval(async () => {
  try {
    const refreshToken = getCookie('refresh_token');
    const { data } = await axios.post('/auth/refresh-token', { refresh_token: refreshToken });
    localStorage.setItem('access_token', data.access_token);
  } catch (error) {
    // 刷新令牌失败，清除所有令牌并重定向到登录页面
    localStorage.removeItem('access_token');
    document.cookie = 'refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; secure; samesite=strict';
    window.location.href = '/login';
  }
}, 5 * 60 * 1000); // 每5分钟刷新一次