如何从Azure B2C获取JWT Token？URL中#符号导致无法读取Token怎么办

一、URL中的#符号是什么？ #

URL里的#叫做片段标识符（Fragment Identifier），核心特性是：

• 这部分内容仅保留在浏览器端，不会随HTTP请求发送到服务器
• 后端接收到的请求只会包含#之前的URL部分，因此无法通过后端直接获取#后的参数

二、如何读取这个JWT token？ #

由于片段标识符仅在浏览器端可见，需通过前端代码解析读取：

1. 原生JavaScript实现 #

直接操作浏览器的location.hash属性解析参数：

// 获取包含#的片段内容
const hashContent = window.location.hash;
// 移除开头的#，用URLSearchParams解析参数
const paramObj = new URLSearchParams(hashContent.slice(1));
// 提取id_token
const idToken = paramObj.get('id_token');

2. 前端框架示例（以React为例） #

结合路由工具获取并解析hash：

import { useLocation } from 'react-router-dom';

function TargetPage() {
  const location = useLocation();
  const params = new URLSearchParams(location.hash.slice(1));
  const idToken = params.get('id_token');
  
  // 后续token验证、存储逻辑
}

补充说明 #

Azure B2C用#返回id_token，是因为你使用了response_type=id_token的OAuth2隐式授权流。该流程通过片段标识符传递token，避免token被服务器日志记录，提升安全性。

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