本文将详细介绍如何在JavaScript前端应用中，于用户成功登录后安全地获取并存储API认证令牌。我们将探讨如何利用Web Storage API（特别是sessionstorage）来持久化令牌，并演示如何在后续的http请求中携带此令牌以访问受保护的后端资源，同时提供令牌清除和登出机制，确保用户会话管理的完整性。
1. API认证令牌概述
在现代web应用中，api认证令牌（Token）是实现用户身份验证和授权访问受保护资源的关键机制。当用户成功登录后，后端服务器会生成一个令牌并返回给前端。前端将此令牌存储起来，并在后续向服务器发送请求时携带该令牌，服务器通过验证令牌的有效性来确认用户身份并决定是否允许访问特定资源。这种无状态的认证方式广泛应用于restful api。
典型的登录API响应示例如下，其中包含一个用于后续认证的token字段：
{ "success": true, "message": "Login successful", "data": [ { "merchant_code": "000004", "token": "4d9519909d99b3d451abeff1512b540e3319124f" } ] }
2. 登录成功后令牌的获取与存储
在JavaScript中，当通过fetch或其他HTTP客户端库成功调用登录API并获取到响应后，我们需要解析响应数据，提取出认证令牌，并将其存储在客户端以便后续使用。Web Storage API（包括sessionStorage和localStorage）是浏览器提供的一种本地存储机制，非常适合存储此类数据。
sessionStorage与localStorage的选择：
- sessionStorage: 数据仅在当前浏览器会话期间有效。当用户关闭浏览器标签页或窗口时，sessionStorage中的数据会被清除。适用于需要会话级持久化的场景。
- localStorage: 数据会永久保存，除非被用户清除或通过代码删除。适用于需要跨会话持久化的场景（例如“记住我”功能）。
根据提供的场景，使用sessionStorage是合适的选择，因为它提供了会话级的安全性，并在用户关闭会话后自动清除令牌。
立即学习“Java免费学习笔记（深入）”；
以下代码演示了如何在登录成功后，从API响应中提取token和merchant_code，并使用sessionStorage.setItem()将其存储：
fetch("http://127.0.0.1:8000/api/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) // 假设payload是包含用户凭据的对象 }) .then((res) => res.json()) .then((response) => { if (response.message === "Login successful") { console.log('登录成功'); // 确保响应结构正确，并访问到token和merchant_code if (response.data && response.data.length > 0) { sessionStorage.setItem("token", response.data[0].token); sessionStorage.setItem("merchant_code", response.data[0].merchant_code); console.log('令牌和商户码已存储到sessionStorage'); // 可以在此处执行登录后的页面跳转或UI更新 } else { console.error('API响应数据结构不符合预期，无法获取令牌。'); } } else { Swal.fire({ icon: 'error', title: '错误', text: '登录失败，请重试', confirmButtonColor: 'red', }); } console.log(response); }) .catch((e) => { Swal.fire({ icon: 'error', title: '错误', text: '服务器连接失败，请稍后再试！', confirmButtonColor: 'red', }); });
在上述代码中，sessionStorage.setItem(“token”, response.data[0].token)将令牌存储在键名为”token”的sessionStorage项中。同样，merchant_code也被存储。
3. 使用存储的令牌访问受保护资源
一旦令牌被存储，前端在向需要认证的后端API发送请求时，就必须将该令牌包含在HTTP请求头中。最常见的做法是使用Authorization头，并采用Bearer方案。
在发送请求之前，首先需要从sessionStorage中获取存储的令牌：
const token = sessionStorage.getItem("token"); if (token) { // 用户已登录，可以发送带令牌的请求 console.log("用户已登录，令牌存在。"); // 示例：访问受保护的用户数据API fetch("http://127.0.0.1:8000/api/user/profile", { method: "GET", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` // 将令牌添加到Authorization头 } }) .then(res => res.json()) .then(data => { console.log("用户资料：", data); // 处理获取到的用户资料 }) .catch(error => { console.error("获取用户资料失败：", error); // 处理错误，例如令牌过期或无效 if (error.response && error.response.status === 401) { // 令牌无效或过期，可能需要强制用户重新登录 Swal.fire({ icon: 'warning', title: '会话过期', text: '您的登录会话已过期，请重新登录。', confirmButtonColor: 'red', }).then(() => { // 清除令牌并跳转到登录页 sessionStorage.removeItem("token"); sessionStorage.removeItem("merchant_code"); // window.location.href = '/login'; // 示例：跳转到登录页 }); } }); } else { // 用户未登录，令牌不存在，可能需要重定向到登录页 console.log("用户未登录，令牌不存在。"); // window.location.href = '/login'; // 示例：跳转到登录页 }
通过sessionStorage.getItem(“token”)获取令牌后，将其动态地插入到headers对象的Authorization属性中，格式为Bearer YourTokenString。
4. 令牌的清除与用户登出
当用户选择登出时，或者会话因其他原因结束时，必须清除存储的认证令牌，以确保会话安全和用户状态的正确管理。
- 清除特定项: sessionStorage.removeItem(“keyName”)
- 清除所有项: sessionStorage.clear()
以下是登出操作的示例代码：
function logoutUser() { // 清除存储的令牌和相关信息 sessionStorage.removeItem("token"); sessionStorage.removeItem("merchant_code"); // 如果有其他会话相关数据，也一并清除 // sessionStorage.clear(); // 或者使用clear()清除所有sessionStorage数据 console.log("用户已登出，令牌已清除。"); // 执行登出后的页面跳转或UI更新，例如重定向到登录页 // window.location.href = '/login'; } // 假设有一个登出按钮或链接调用此函数 // document.getElementById('logoutButton').addEventListener('click', logoutUser);
5. 注意事项与最佳实践
- 安全性: sessionStorage和localStorage存储的数据易受跨站脚本攻击（xss）的影响。如果恶意脚本能够注入到页面中，它可以访问并窃取存储在其中的令牌。对于高度敏感的应用，可以考虑使用HttpOnly Cookies，它们无法通过JavaScript访问，从而降低XSS风险。然而，对于大多数单页应用（SPA）和API认证场景，sessionStorage结合良好的XSS防护措施是可接受的。
- 令牌有效期: 后端通常会为令牌设置有效期。前端需要能够处理令牌过期的情况。当收到401 Unauthorized响应时，通常意味着令牌无效或过期，此时应引导用户重新登录或尝试刷新令牌（如果后端支持）。
- 错误处理: 在API请求中，始终要包含catch块来处理网络错误、服务器无响应等异常情况，并向用户提供友好的反馈。
- 用户体验: 在登录、登出和API请求过程中，提供适当的加载指示、成功/失败消息，以提升用户体验。
- 代码封装: 考虑将令牌的存储、获取和清除逻辑封装成一个独立的模块或服务，以便在整个应用中复用和管理。
总结
通过本文的讲解，您应该已经掌握了在JavaScript前端应用中，从API响应中获取认证令牌、使用sessionStorage进行存储，以及在后续请求中携带令牌访问受保护资源的方法。同时，也了解了如何实现安全的登出操作和一些重要的最佳实践。正确地管理API认证令牌是构建安全、健壮Web应用的关键一环。
