如何访问本地存储中的Token？同域页面请求时如何携带Token认证？

嘿，我来帮你梳理这两个前端认证里的常见问题～

在浏览器环境下，访问localStorage里的token非常直接，用浏览器原生提供的localStorage.getItem()方法就能搞定。假设你的token存在键名为access_token的条目里，示例代码如下：

// 获取存储的token
const accessToken = localStorage.getItem('access_token');

// 记得先判断token是否存在，避免后续逻辑报错
if (accessToken) {
  // 拿到token后可以执行后续认证相关操作
  console.log("获取到用户token:", accessToken);
} else {
  // token不存在时，通常需要引导用户跳转登录页
  console.log("未检测到登录状态，请先登录");
  window.location.href = "/login";
}

如果只是想确认localStorage里有没有这个键，也可以用localStorage.hasOwnProperty('access_token')判断，但实际开发里直接通过getItem返回值是否为null来判断就足够了。

因为同域名下的页面共享localStorage，所以其他页面同样可以用上面的方法拿到token。接下来要把它带到请求中，最常用也最安全的方式是放在请求头的Authorization字段里（也就是行业通用的Bearer Token模式），这也是大部分后端认证接口的约定。

给你举两个常用请求方式的例子：

• 用原生fetch发起请求：

const accessToken = localStorage.getItem('access_token');

if (accessToken) {
  fetch('/api/user/info', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${accessToken}`, // 核心就是这一行，把token放到请求头
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    // 处理token过期的情况
    if (response.status === 401) {
      localStorage.removeItem('access_token');
      window.location.href = '/login';
      return;
    }
    return response.json();
  })
  .then(data => console.log("用户信息:", data))
  .catch(err => console.error("请求出错:", err));
}

• 用axios（前端常用HTTP库）全局配置：
  如果项目里用axios，可以配置请求拦截器，让所有请求自动带上token，不用每个请求都手动写：

// 在项目初始化的文件里配置拦截器
axios.interceptors.request.use(config => {
  const accessToken = localStorage.getItem('access_token');
  if (accessToken) {
    // 给所有请求的请求头加上Authorization字段
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
});

// 之后发起请求就不用手动处理token了
axios.get('/api/user/info')
  .then(res => console.log(res.data))
  .catch(err => {
    if (err.response?.status === 401) {
      localStorage.removeItem('access_token');
      window.location.href = '/login';
    }
  });

另外还有两种不推荐的方式：

• 把token放在URL参数里：比如/api/data?token=${accessToken}，这种方式不安全，token会暴露在地址栏、服务器日志中，容易被窃取；
• 放在请求体里：POST/PUT请求可以把token塞进请求体，但不符合RESTful认证规范，且每个请求都要手动添加，效率低。

最后提醒一句：如果你的token有过期时间，一定要在请求返回401（未授权）时，清除localStorage里的token并引导用户重新登录，避免用户一直停留在错误状态。

内容的提问来源于stack exchange，提问作者Surya Prakash