学习前端token解析

前端token解析

Token 通常是 JSON Web Token（JWT），它是一种用于在网络应用间安全传递信息的开放标准（RFC 7519）。前端解析 Token 主要是为了获取其中包含的用户信息、过期时间等内容。

JWT 由三部分组成，通过 . 分隔，分别是头部（Header）、载荷（Payload）和签名（Signature）。其中，头部和载荷是经过 Base64Url 编码的 JSON 字符串，我们可以对其进行解码来获取其中的信息。

手动解析

// 示例 JWT Token
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

// 解析 Token 的函数
function parseJwt(token) {
    // 分割 Token 为三部分
    const parts = token.split('.');
    if (parts.length !== 3) {
        throw new Error('Invalid JWT format');  //抛出异常，jwt不合法
    }

    // 解码载荷部分
    const payloadBase64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
    const payloadJson = atob(payloadBase64);
    return JSON.parse(payloadJson);
}

try {
    const payload = parseJwt(token);
    console.log('解析后的载荷信息:', payload);
} catch (error) {
    console.error('解析 Token 时出错:', error.message);
}

第三方库解析

以 jwt-decode为例

依赖安装

npm install jwt-decode

示例

import jwtDecode from 'jwt-decode';

// 示例 JWT Token
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

try {
    const payload = jwtDecode(token);
    console.log('解析后的载荷信息:', payload);
} catch (error) {
    console.error('解析 Token 时出错:', error.message);
}

注意事项

• 安全性：前端解析 Token 只能获取其中的公开信息，不能验证 Token 的签名有效性。验证签名应该在后端进行，以确保 Token 没有被篡改。
• 过期时间：在解析 Token 时，可以获取其中的过期时间信息，前端可以根据过期时间进行相应的处理，例如提示用户重新登录。

解析的载荷

{
exp,  //截止时间（单位：秒）
userId  //用户id
}