解析JWT token

在前端解析 token 的过程通常涉及到验证 token 的有效性以及提取 token 中包含的信息。Token 通常用于身份验证和授权，例如 JWT（JSON Web Tokens）。

这里主要记录解析token：

1、获取token

首先，你需要从存储中获取 token。这可能是从本地存储（如 localStorage 或 sessionStorage）中获取，或者是从服务器响应中获取。

2、解析token

使用 JSON.parse 和 atob（在某些浏览器中是 window.atob）来解析 JWT token。JWT token 通常由三部分组成：头部（header）、载荷（payload）和签名（signature），它们之间由点（.）分隔。

const [header, payload, signature] = token.split('.');
const decodedPayload = JSON.parse(atob(payload));

或者 方法原文链接：https://blog.csdn.net/skyblue_afan/article/details/121850178

var strings = data.data.normal_login_token.split(".");//通过split()方法将token转为字符串数组
//取strings[1]数组中的第二个字符进行解析
var userinfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); 
//然后可以拿到解析后的数据，可以console.log()打印下，
console.log(userinfo,'userinfo');

** 在 Vue 3 和 UniApp 开发环境中，遇到了 atob 报错，这可能是因为 atob 函数在当前环境中不可用。atob 是一个全局函数，用于将 Base64 编码的字符串解码为二进制数据。在浏览器环境中，atob 是可用的，但在某些 Node.js 环境中可能不可用。

最后在这种情况下，采取方法：使用crypto-js 库来解析 JWT token

1、安装 crypto-js：

npm install crypto-js

2、引入 crypto-js

import CryptoJS from 'crypto-js';

3、解析

使用 CryptoJS 解码 JWT token 的载荷

const token = uni.getStorageSync('token'); 
const [header, payload, signature] = token.split('.'); // 分割 JWT token

// 解码 Base64Url 编码的头部和载荷
const decodedHeader = CryptoJS.enc.Base64url.parse(header);
const decodedPayload = CryptoJS.enc.Base64url.parse(payload);

// 将解码后的二进制数据转换为字符串
const decodedHeaderString = decodedHeader.toString(CryptoJS.enc.Utf8);
const decodedPayloadString = decodedPayload.toString(CryptoJS.enc.Utf8);

// 解析 JSON
const headerJSON = JSON.parse(decodedHeaderString);
const payloadJSON = JSON.parse(decodedPayloadString);

// 你可以从 headerJSON 和 payloadJSON 中获取你需要的数据
console.log('Header:', headerJSON);
console.log('Payload:', payloadJSON);