登录时获取的JWT token解码返回null或提示无效token该如何解决？

根因分析 #

你遇到的解码返回null、报错的核心原因是异步调用逻辑顺序错误：

1. axios.post是异步请求，返回的是Promise对象而非接口响应的真实JWT字符串，你直接将该Promise对象传入解码方法，自然触发无效token报错。你看到的Uncaught (in promise) n {message: 'Invalid token specified'}翻译为：未捕获的Promise异常：指定的Token无效
2. 你的解码代码写在请求的then回调之外，执行解码逻辑时接口请求还未完成，根本没有拿到真实的token值

修复方案 #

方案1：保留原有.then写法调整逻辑 #

所有需要使用token的逻辑都必须放到then回调内部，等请求完成拿到token后再执行：

import jwt from 'jsonwebtoken';
import axios from 'axios';

function loginRequest(){
    axios.post('https://afe2021fitness.azurewebsites.net/api/Users/login', state)
    .then(data => {
        // 在这里拿到真实的token
        const token = data.data.jwt;
        localStorage.setItem('jwtToken', token);
        console.log('接口返回的token：', token);
        // 解码逻辑放在回调内部执行
        console.log('解码结果：', jwt.decode(token));
        // 用jwt-decode库也是同样的写法
        // const decoded = jwtdecode(token);
        // console.log('jwt-decode解码结果：', decoded);
    })
    .catch(err => {
        console.error('登录请求失败：', err);
    })
}

方案2：用async/await写法简化逻辑（更推荐） #

import jwt from 'jsonwebtoken';
import axios from 'axios';

async function loginRequest(){
    try {
        // await等待请求完成再执行后续逻辑
        const res = await axios.post('https://afe2021fitness.azurewebsites.net/api/Users/login', state);
        const token = res.data.jwt;
        localStorage.setItem('jwtToken', token);
        console.log('接口返回的token：', token);
        console.log('解码结果：', jwt.decode(token));
    } catch(err) {
        console.error('请求或解码失败：', err);
    }
}

额外排查点 #

如果调整逻辑后仍然报错，可按以下顺序检查：

• 打印拿到的token字符串，确认是标准JWT格式：由.分隔的三段Base64编码字符串，没有空值、多余引号或特殊字符
• 如果是在浏览器环境使用，更推荐用轻量的jwt-decode库解码，不需要传入密钥就可以读取JWT的payload部分

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