使用 Cookies 存储和获取 Access Token 和 Refresh Token 是一种相对安全的做法，尤其是当你设置了 HttpOnly 标志时，这样可以防止 JavaScript 访问这些 Cookies，从而降低 XSS 攻击的风险。以下是如何在 React 中存储和获取 Cookies 的示例。

1. 安装 js-cookie 库

为了更方便地处理 Cookies，可以使用 js-cookie 库。首先，需要安装它：

npm install js-cookie

2. 示例代码

下面是如何使用 js-cookie 进行存储和获取 Cookies 的示例。

存储令牌

当你从登录 API 获取 Access Token 和 Refresh Token 后，可以使用 Cookies.set 来存储它们。

import Cookies from 'js-cookie';

// 假设你在登录成功时得到了这两个令牌
const accessToken = 'your_access_token';
const refreshToken = 'your_refresh_token';

// 存储 Cookies
Cookies.set('accessToken', accessToken, { expires: 7, secure: true, sameSite: 'Strict' }); // 7天过期
Cookies.set('refreshToken', refreshToken, { expires: 30, secure: true, sameSite: 'Strict' }); // 30天过期

在上面的代码中，expires 参数设置了 Cookies 的过期时间，secure 参数表示只有在 HTTPS 协议下才能发送 Cookies，sameSite 限制了 Cookies 在一定情况下的使用。

获取令牌

在需要访问令牌时，可以通过 Cookies.get 进行获取。

import Cookies from 'js-cookie';

// 获取令牌
const accessToken = Cookies.get('accessToken');
const refreshToken = Cookies.get('refreshToken');

// 使用令牌
if (accessToken) {
    console.log('Access Token:', accessToken);
}
if (refreshToken) {
    console.log('Refresh Token:', refreshToken);
}

3. 应用 Cookies 的情况

当你在发起API请求时，需要在请求头中附带 Access Token，可以通过上述方式获取它：

import axios from 'axios';
import Cookies from 'js-cookie';

// 创建一个 Axios 实例
const api = axios.create({
    baseURL: '<http://your-api-endpoint.com>',
});

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

// 示例 API 调用
const fetchData = async () => {
    try {
        const response = await api.get('/protected-resource');
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

// 调用 fetchData
fetchData();

4. 注意事项

• HttpOnly Cookies：如果你将 Cookies 设置为 HttpOnly，JavaScript 将无法访问这些 Cookies，因此你需要在服务器端设置 Cookies，并通过 set-cookie 响应头发送给客户端。
• Cross-Origin Resource Sharing (CORS)：如果你的 API 在不同的域上，要确保 CORS 设置正确，以允许 cookies 传递。
• Secure Flag：在生产环境中部署时，请确保你的应用使用 HTTPS，并且在存储 Cookies 时设置 secure 标志，使 Cookies 只能通过安全的连接传输。

通过这种方式，可以安全地存储和获取 Access Token 和 Refresh Token, 提高应用的安全性。