Spring Boot中Azure AD SSO登录后全局设置Authorization Bearer Token问题

一、捕获并持久化Id_token #

你当前用response_type=id_token+response_mode=form_post的方式登录，Azure AD会把包含id_token的表单POST到你的redirect_uri（即http://localhost:3000/dashboard/）。前端需要在这个页面处理POST请求，提取并存储token：

1. 处理POST请求获取id_token
   以React为例，在Dashboard组件的挂载阶段（比如useEffect钩子），解析请求体拿到id_token：

   useEffect(() => {
     const parseFormData = async () => {
       const formData = await new Response(document.body).formData();
       const idToken = formData.get('id_token');
       if (idToken) {
         // 用sessionStorage存储，关闭浏览器自动失效，安全性更高
         sessionStorage.setItem('azureAdIdToken', idToken);
       }
     };
     parseFormData();
   }, []);
   

   Vue项目可在created或mounted钩子中做类似处理。

2. 选择合适的存储方式

   • sessionStorage：短期会话使用，关闭浏览器自动清除，适合敏感凭证
   • localStorage：长期保持登录状态，但需防范XSS攻击风险
   • 状态管理工具（如Vuex/Redux）：同时存于内存和本地存储，方便全局调用

二、全局拦截请求，自动添加Authorization头 #

不管用Axios还是原生Fetch，都可以封装拦截逻辑，自动给所有REST请求带上Authorization: Bearer <id_token>头：

1. Axios 实现方式 #

创建Axios实例并添加请求拦截器：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '你的API基础地址',
});

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

// 导出实例，所有API请求统一使用该实例
export default apiClient;

2. 原生Fetch 封装方式 #

封装全局Fetch函数替代原生方法：

async function fetchWithToken(url, options = {}) {
  const idToken = sessionStorage.getItem('azureAdIdToken');
  // 合并请求头，自动添加Authorization
  const headers = {
    ...options.headers,
    ...(idToken && { Authorization: `Bearer ${idToken}` }),
  };
  return fetch(url, { ...options, headers });
}

后续所有REST请求都调用fetchWithToken即可自动携带token。

三、额外注意事项 #

• Token过期处理：id_token包含过期时间（解码后查看exp字段），建议在拦截器中检查过期状态，过期后触发重新登录流程
• 安全性优化：避免用localStorage存储token时遭遇XSS攻击，可考虑后端设置HttpOnly Cookie存储token；或直接使用Azure AD官方MSAL.js库，自动处理token的获取、存储与刷新
• 调试验证：通过浏览器开发者工具的Network面板，检查请求头是否包含Authorization字段，确认token是否正确携带

内容的提问来源于stack exchange，提问作者Mayur Thole