0x01 JWT 简介与工作原理#

JSON Web Token（JWT）是一种开放标准（RFC 7519），用于在网络应用环境中安全传输声明。它是一种紧凑、自包含的令牌格式，由三部分组成：Header（头部）、Payload（载荷）和 Signature（签名），以点（.）分隔，形成 Base64Url 编码的字符串。

• Header：包含令牌类型（“typ”: “JWT”）和签名算法（如 “alg”: “HS256” 或 “RS256”）。
• Payload：承载声明信息，包括注册声明（iss、exp、sub 等）和自定义声明（用户 ID、角色等）。注意，Payload 未加密，仅编码，不应存放敏感数据。
• Signature：使用密钥对 Header 和 Payload 进行签名，确保令牌完整性和真实性。

JWT 的典型认证流程：

1. 用户提交用户名和密码登录。
2. 服务器验证凭证成功后，生成 JWT 并返回给客户端。
3. 客户端存储 JWT（通常在 localStorage 或 HttpOnly Cookie 中）。
4. 后续请求中，客户端在 Authorization 头携带 JWT（Bearer <token>）。
5. 服务器验证 JWT 的签名、过期时间和声明，若有效则授权访问。

相比传统 Session 认证，JWT 无状态，便于分布式系统扩展，但需注意令牌不可主动撤销（依赖短过期时间和刷新机制）。

0x02 前端 Token 存储与管理#

前端管理 JWT 的核心是通过 setAuthToken 和 clearAuthToken 函数统一处理认证状态，通常结合 Axios 实例实现。

• 存储方式：

  • 优先使用 HttpOnly + Secure + SameSite Cookie：防止 XSS 攻击（JavaScript 无法访问），并通过 SameSite 属性缓解 CSRF。
  • 避免 localStorage/sessionStorage：易受 XSS 窃取。
  • 若必须使用 JavaScript 存储，结合短过期时间和刷新令牌。

• Axios 封装示例（apiClient.ts）：

  1
  import axios from 'axios';
  2
  
  3
  const apiClient = axios.create({ baseURL: '/api' });
  4
  
  5
  export const setAuthToken = (token: string) => {
  6
    if (token) {
  7
      apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  8
    }
  9
  };
  10
  
  11
  export const clearAuthToken = () => {
  12
    delete apiClient.defaults.headers.common['Authorization'];
  13
  };
  14
  
  15
  // 请求拦截器：可选统一添加其他逻辑
  16
  apiClient.interceptors.request.use(config => {
  17
    // 可从 Cookie 或存储中读取 token
  18
    return config;
  19
  });
  20
  
  21
  export default apiClient;

  展开收起

登录成功后：

1
// 登录接口调用后
2
const response = await login(username, password);
3
localStorage.setItem('token', response.data.token); // 或依赖 Cookie
4
setAuthToken(response.data.token);

登出时：

1
clearAuthToken();
2
localStorage.removeItem('token'); // 或清除 Cookie

0x03 通过钩子或守卫验证用户权限#

在前端框架中，使用路由守卫或钩子（如 Vue Router 的 beforeEach 或 React 的自定义钩子）验证权限，确保未认证用户无法访问受保护路由。

• Vue 示例（router/index.ts）：

  1
  import router from '@/router';
  2
  import { getToken } from '@/utils/auth'; // 从存储获取 token
  3
  
  4
  router.beforeEach((to, from, next) => {
  5
    if (to.meta.requiresAuth) { // 路由元信息标记需认证
  6
      const token = getToken();
  7
      if (token) {
  8
        // 可选：调用后端验证 token 有效性
  9
        next();
  10
      } else {
  11
        next('/login'); // 重定向登录
  12
      }
  13
    } else {
  14
      next();
  15
    }
  16
  });

  展开收起

• React 示例（ProtectedRoute 组件）： 使用 Context 或 Redux 管理认证状态，在路由组件中检查：

  1
  import { Navigate } from "react-router-dom";
  2
  
  3
  const ProtectedRoute = ({ children }) => {
  4
    const token = localStorage.getItem("token");
  5
    return token ? children : <Navigate to="/login" />;
  6
  };

此外，可结合角色声明（Payload 中的 roles）实现细粒度权限控制，如按钮级隐藏。

0x04 Token 刷新与过期处理#

为提升用户体验，实施刷新令牌机制：

• Access Token：短过期（15-60 分钟）。
• Refresh Token：长过期，存储在 HttpOnly Cookie。
• 在 Axios 响应拦截器中捕获 401 错误，调用刷新接口获取新 Access Token。

示例：

1
apiClient.interceptors.response.use(
2
  response => response,
3
  async error => {
4
    if (error.response.status === 401) {
5
      // 调用刷新接口，更新 token
6
      const newToken = await refreshToken();
7
      setAuthToken(newToken);
8
      // 重试原请求
9
      return apiClient(error.config);
10
    }
11
    return Promise.reject(error);
12
  }
13
);

0x05 安全实践#

• 使用 HTTPS
• 严格验证服务器端签名、exp、iss 和 aud
• 避免 Payload 中存放敏感信息
• 实施 CSRF 防护（SameSite Cookie 或 token）
• 定期轮换密钥，支持刷新令牌旋转
• 监控异常登录，实施黑名单（短期令牌下可选）

0x06 参考资料#

• RFC 7519: JSON Web Token
• OWASP JWT Cheat Sheet
• Auth0 JWT Best Practices
• Curity JWT Security Guide