基于Spring Boot+JWT的JS+Thymeleaf前端认证：Token存储与携带咨询

一、Token的存储方案 #

根据业务场景选择合适的存储位置，各方案优劣如下：

• LocalStorage：持久化存储，页面刷新或浏览器重启后仍保留。缺点是易受XSS攻击，适合非高敏感操作场景。
  存储/获取代码：

  // 存储Token
  localStorage.setItem('jwtToken', 'your-generated-jwt-token');
  // 获取Token
  const token = localStorage.getItem('jwtToken');
  

• SessionStorage：会话级存储，仅在当前浏览器会话有效，关闭浏览器后自动清除。同样存在XSS风险，适合临时会话场景。
  存储/获取代码：

  sessionStorage.setItem('jwtToken', 'your-generated-jwt-token');
  const token = sessionStorage.getItem('jwtToken');
  

• HttpOnly Cookie：安全性最高，能防范XSS攻击（前端JS无法读取），需后端配合配置。适合同域渲染的Thymeleaf项目，后端设置Cookie时添加HttpOnly、Secure标记，浏览器会自动在请求时携带该Cookie，无需前端手动处理。

二、自动给所有请求添加Token #

通过封装请求或拦截器，实现所有接口请求自动携带Token：

1. 原生fetch封装 #

编写通用请求函数，自动注入Token：

async function fetchWithAuth(url, options = {}) {
  const token = localStorage.getItem('jwtToken'); // 根据存储方案调整获取方式
  // 构造请求头，添加Authorization字段
  const headers = {
    ...options.headers,
    'Content-Type': 'application/json',
    'Authorization': token ? `Bearer ${token}` : ''
  };
  return fetch(url, { ...options, headers });
}

// 使用示例
fetchWithAuth('/api/user/info')
  .then(res => {
    if (res.status === 401) {
      // Token过期或无效，清除存储并跳转登录页
      localStorage.removeItem('jwtToken');
      window.location.href = '/login';
    }
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

2. axios请求拦截器 #

如果项目使用axios，可全局配置拦截器实现自动携带Token：

import axios from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: '/api'
});

// 请求拦截器：自动注入Token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('jwtToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => Promise.reject(error));

// 响应拦截器：处理Token过期
api.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    localStorage.removeItem('jwtToken');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

// 使用示例
api.get('/user/info').then(res => console.log(res.data));

三、Thymeleaf中初始化Token #

Thymeleaf是服务端渲染模板，登录成功后后端可将Token存入Model，页面加载时渲染到JS中完成存储：

<script th:inline="javascript">
  <!-- 从后端Model中获取Token并存储 -->
  const initialToken = [[${jwtToken}]];
  if (initialToken) {
    localStorage.setItem('jwtToken', initialToken);
  }
</script>

四、Bearer Token的传递格式 #

Bearer Token的标准传递方式是在请求头的Authorization字段中设置，格式为：

Authorization: Bearer <your-jwt-token>

上述代码示例已实现该格式，后端可通过读取请求头的Authorization字段解析Token进行验证。

内容的提问来源于stack exchange，提问作者Mohit Kumar Bhadani