使用 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, 提高应用的安全性。