Angular中JWT解码土耳其字符乱码问题求助

原代码用atob()解码JWT payload时出现乱码，核心原因是atob()默认按Latin-1编码解析，而JWT的payload是基于UTF-8的Base64URL编码数据，编码不匹配导致非ASCII字符解析错误。要实现和jwt.io一致的解码效果，需手动处理编码转换，以下是Angular环境下的可行方案：

正确解码函数实现 #

创建专用解码函数，覆盖Base64URL转码、编码格式转换的完整流程：

function decodeJwtPayload(token: string): LoggedInUser {
  // 1. 将JWT的Base64URL格式转为标准Base64
  const base64Url = token.split('.')[1];
  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  const paddedBase64 = base64.padEnd(base64.length + ((4 - base64.length % 4) % 4), '=');

  // 2. 解码Base64为二进制字符串
  const binaryStr = atob(paddedBase64);

  // 3. 将二进制字符串转换为UTF-8编码的字符串
  const utf8Str = decodeURIComponent(escape(binaryStr));

  // 4. 解析为JSON并转换为LoggedInUser类型
  return JSON.parse(utf8Str) as LoggedInUser;
}

关键步骤说明 #

• Base64URL转标准Base64：JWT为适配URL场景，会把Base64的+替换为-、/替换为_，并省略填充符=，必须先还原成标准Base64才能正常解码。
• 二进制转UTF-8：escape(binaryStr)将二进制字符串转为URI编码，再通过decodeURIComponent还原为UTF-8字符串，这是解决非ASCII字符乱码的核心操作。
• 类实例化（可选）：如果需要严格生成LoggedInUser类实例（而非仅类型断言），可以手动赋值属性：

  const payload = JSON.parse(utf8Str);
  const user = new LoggedInUser();
  user.username = payload.username;
  // 其他属性按需赋值
  return user;
  

效果验证 #

使用含土耳其字符的JWT测试时，解码后可正确得到username: "Uğur Gül"，与jwt.io的解码结果完全一致。

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