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