JavaScript新手求助：登录成功后如何保存及使用Token

一、登录成功后保存Token #

前端常用3种Token存储方式，按需选择：

1. localStorage（持久存储，关闭浏览器不失效） #

适合需要长期保持登录状态的场景，修改你的登录代码如下：

if (response.message === "Login successful") {
  console.log('login successful');
  // 从返回数据中提取Token（注意data是数组，取第一个元素）
  const token = response.data[0].token;
  // 存入localStorage
  localStorage.setItem('authToken', token);
}

2. sessionStorage（会话存储，关闭浏览器即清空） #

适合临时登录场景，替换存储对象即可：

sessionStorage.setItem('authToken', token);

3. Cookie（可设置过期时间，支持安全属性） #

如果后端要求或需要更严格的安全控制，用Cookie存储：

// 设置有效期7天的Cookie，可根据需求调整参数
document.cookie = `authToken=${token}; max-age=604800; path=/;`;

二、后续API调用时携带Token #

多数后端要求在请求头中携带Token，常见格式为Authorization: Bearer <token>，示例如下：

示例：获取当前登录用户数据的API调用 #

// 先从存储中取出Token
const token = localStorage.getItem('authToken');

// 若Token不存在，直接跳转登录页
if (!token) {
  window.location.href = '/login';
  return;
}

fetch("http://127.0.0.1:8000/api/current-user", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    // 按后端要求的格式携带Token，这里是Bearer格式
    "Authorization": `Bearer ${token}`
  }
}).then(res => res.json())
  .then(userData => {
    console.log('用户数据：', userData);
    // 处理用户数据逻辑
  })
  .catch(err => {
    console.error('请求失败：', err);
    // 处理错误，比如Token过期时跳转登录页
  });

注意事项 #

• 调用API前务必检查Token是否存在，不存在则引导用户重新登录
• 如果后端要求的Token格式不是Bearer，直接调整请求头字段即可（比如部分后端用token: ${token}）
• 跨域场景下，需确保后端配置CORS允许携带自定义请求头

内容的提问来源于stack exchange，提问作者Nosi Ishmael