最安全的做法是将令牌存储在应用程序状态中。但是，需要注意的是，如果用户刷新应用程序，令牌将被重置。这可能会导致用户身份验证状态丢失。
这就是为什么令牌需要存储在 cookie 或 localStorage/sessionStorage 中。
在 localStorage 中存储身份验证令牌可能会带来安全风险，特别是在存在跨站脚本 (XSS) 漏洞的情况下，可能会导致恶意行为者窃取令牌。
选择将令牌存储在使用 HttpOnly 属性配置的 cookie 中，可以增强安全性，因为客户端 JavaScript 无法访问它们。在我们的示例应用程序中，我们利用 js-cookie 进行 cookie 管理，假设真正的 API 将强制执行 HttpOnly 属性以增强安全性，并且应用程序无法从客户端访问 cookie。
要在使用 js-cookie 的 React TypeScript 应用程序中实现安全令牌管理，其中真正的 API 将强制执行 HttpOnly 属性，您可以按照以下步骤操作：
1。了解设置
HttpOnly Cookie：这些 Cookie 由服务器设置，无法通过 JavaScript 访问，从而更安全地抵御 XSS 攻击。
假设：服务器将处理 HttpOnly cookie 的设置和管理。您的客户端代码将专注于通过 API 响应和请求处理令牌。
2。 React TypeScript 设置
首先，确保您安装了 js-cookie：
npm install js-cookie
3。设置令牌管理
import React, { createContext, useContext, useEffect, useState } from 'react';
import Cookies from 'js-cookie';
interface AuthContextType {
token: string | null;
login: (token: string) => void;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [token, setToken] = useState<string | null>(null);
// Assuming the token is returned from a server and set as an HttpOnly cookie
useEffect(() => {
const fetchTokenFromServer = async () => {
// Example API call to authenticate and retrieve token (token management handled by server)
try {
const response = await fetch('/api/authenticate', {
method: 'POST',
credentials: 'include', // This sends the HttpOnly cookie to the server
});
if (response.ok) {
setToken(await response.text()); // Assume token returned in response body for simplicity
}
} catch (error) {
console.error('Error fetching token:', error);
}
};
fetchTokenFromServer();
}, []);
const login = (token: string) => {
// If your server returns the token via a non-HttpOnly cookie or body, store it as needed
Cookies.set('token', token); // Only use this if the token is not HttpOnly
setToken(token);
};
const logout = () => {
Cookies.remove('token');
setToken(null);
};
return (
<AuthContext.Provider value={{ token, login, logout }}>
{children}
</AuthContext.Provider>
);
};
4。在组件中使用身份验证上下文
import React from 'react';
import { useAuth } from './AuthProvider';
const Dashboard: React.FC = () => {
const { token, logout } = useAuth();
if (!token) {
return <p>You are not logged in.</p>;
}
return (
<div>
<h1>Dashboard</h1>
<p>Your token is: {token}</p>
<button onClick={logout}>Logout</button>
</div>
);
};
export default Dashboard;
5。处理 HttpOnly Cookie
由于客户端代码无法直接访问 HttpOnly cookie，因此服务器必须处理这些 cookie。在现实场景中：
登录：用户登录时，服务器设置HttpOnly cookie，客户端不直接管理。
API 请求：所有需要身份验证的请求都应包含凭据：“include”选项以发送 HttpOnly cookie。
6。服务器端实现
确保您的服务器端 API 将令牌设置为 HttpOnly cookie。例如，在 Express.js 服务器中：
res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'Strict' });
7。保护您的应用程序
在生产中始终使用 https，以确保 cookie 安全传输。
考虑在 cookie 中设置 secure: true 以确保它们仅通过 HTTPS 发送。
使用 SameSite=Strict 或 Lax 来防止 CSRF 攻击。
感谢您的阅读！如果您觉得这篇文章有帮助，请点赞。如果您对所讨论的任何主题有任何疑问或需要进一步澄清，请随时与我联系。我是来帮忙的，很想听听您的意见！您可以在 Twitter 或 LinkedIn 上找到我期待与您联系！.
以上是网络安全：用于存储令牌的 localStorage 与 cookie的详细内容。更多信息请关注PHP中文网其他相关文章！
