Bearer Token认证场景下，何时调用获取帖子的HTTP Get请求？

一、调用时机 #

• 登录成功后立即触发：在登录请求的成功回调里，确认拿到Token并完成本地存储（比如localStorage、移动端的AsyncStorage）后，直接调用获取帖子的函数，不用等页面跳转。
• 帖子列表页初始化时触发：如果登录后跳转到帖子列表页，就在页面的初始化钩子（比如React的useEffect、Vue的onMounted）里调用，前提是能从存储中读取到有效的Token。
• Token刷新后重新触发：如果后续请求返回Token过期，刷新Token成功后要重新调用帖子请求，保证数据最新。

二、携带Token的具体方式 #

1. 封装全局请求工具（推荐） #

把Token的携带逻辑封装到统一的请求工具里，每次请求自动带上，不用重复写：

// 以Axios为例的封装示例
import axios from 'axios';

// 创建实例
const request = axios.create({
  baseURL: '你的API基础地址'
});

// 请求拦截器，自动添加Authorization头
request.interceptors.request.use(config => {
  const token = localStorage.getItem('bearer_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 导出获取帖子的接口
export const fetchAllPosts = () => request.get('/posts');

之后在需要的地方直接调用fetchAllPosts()就行，不用管Token的事。

2. 手动添加请求头（临时场景） #

如果没封装工具，调用时手动设置请求头：

async function getPosts() {
  const token = localStorage.getItem('bearer_token');
  try {
    const res = await fetch('/api/posts', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    });
    const posts = await res.json();
    // 拿到数据后渲染到页面
  } catch (err) {
    // 处理错误：比如Token无效，清除存储并跳回登录页
    if (err.response?.status === 401) {
      localStorage.removeItem('bearer_token');
      window.location.href = '/login';
    }
  }
}

三、关键注意点 #

• Token要存靠谱的地方：前端常用localStorage（web）或AsyncStorage（移动端），如果后端支持HttpOnly Cookie，用Cookie更安全。
• 处理Token失效：请求返回401时，必须清除本地Token并引导用户重新登录，避免死循环。
• 状态同步：如果用Redux、Pinia这类状态管理，登录成功后把Token存入全局状态，后续请求直接从状态取，比读存储更高效。

内容的提问来源于stack exchange，提问作者Aditya Pachchigar