EnlightenCode

Bearer Token 详解与最佳实践 ​

什么是 Bearer Token？ ​

Bearer Token 是一种广泛使用的身份验证机制，主要用于保护 API 端点。"Bearer" 的字面意思是"持有者"，这表明任何持有该 token 的人都可以使用它来访问资源，因此需要妥善保管。

Token 格式与使用 ​

基本格式 ​

Bearer Token 在 HTTP 请求头中的标准格式为：

http
Authorization: Bearer <token>

实际示例 ​

http
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

在前端项目中的应用 ​

使用 Axios 发送带 Token 的请求 ​

以下是在 Axios 中配置 Bearer Token 的常见方式：

javascript
// 方式一：创建新的 axios 实例
const token = localStorage.getItem("token");
if (token) {
  const axiosClient = axios.create({
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
}

// 方式二：使用拦截器（推荐）
axios.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

注意事项 ​

  1. 安全存储：Token 应该安全存储，避免 XSS 攻击。建议使用 HttpOnly Cookie。
  2. Token 过期处理：实现 Token 刷新机制，处理过期情况。
  3. 清理机制：用户登出时要清除存储的 Token。

最佳实践 ​

  1. 始终使用 HTTPS：确保 Token 在传输过程中的安全。
  2. 设置合理的过期时间：权衡安全性和用户体验。
  3. 实现错误处理：
javascript
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // Token 失效处理
      localStorage.removeItem('token');
      // 重定向到登录页
    }
    return Promise.reject(error);
  }
);

常见问题排查 ​

  • Token 无效：检查格式是否正确，包括 "Bearer" 前缀和空格
  • 跨域问题：确保 CORS 配置正确
  • Token 过期：实现自动刷新机制

通过以上配置和最佳实践，可以更安全、有效地使用 Bearer Token 进行身份验证。