解码 Jwt 令牌 React答案

【问题标题】：Decode Jwt token React解码 Jwt 令牌 React
【发布时间】：2019-05-19 00:51:09
【问题描述】：

我使用 jsonwebtoken 来解码我的 Token 以查看它是否已过期。但是，console.log 返回 null。

 var token = response.headers.authorization;
 token = token.replace('Bearer','');
 var jwt = require('jsonwebtoken');
 var decoded = jwt.decode(token);
 console.log(decoded);

我不明白，因为我的令牌不为空

【问题讨论】：

第 2 行之后输出什么 console.log(token)？
打印我的令牌值：eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkeWxhbi5uYXRpZXJAYmx1ZXNvZnQtZ3JvdXAuY29tIiwiZXhwIjoxNTQ1MjMyMTUxfQ.4t7fCh3Ux8qJo8xVC3HvsQKx3q0ulfOQclJmGf4vcAu77xoFwboPAjHil1ASfZRr_S7PviM354PdLgioPeiL4g 跨度>
您的包jsonwebtoken 旨在用于后端。对于前端，您应该使用由同一家公司 (auth0) 开发的jwt-dcode，但要小得多，适合前端使用。

标签： reactjs jwt

【解决方案1】：

您似乎正在使用 JWT。要解码这种类型的令牌，您只需使用jwt-decode library。例如，在 ReactJS 中：

import jwt from 'jwt-decode' // import dependency
...
// some logic
axios.post(`${axios.defaults.baseURL}/auth`, { email, password })
    .then(res => {
      const token = res.data.token;
      const user = jwt(token); // decode your token here
      localStorage.setItem('token', token);
      dispatch(actions.authSuccess(token, user));
    })
    .catch(err => {
      dispatch(actions.loginUserFail());
  });

【讨论】：

【解决方案2】：

假设您的标题类似于Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c 然后在第 2 行之后你有一个前导空格。有关前导空格的区别，请参见下面的示例。修剪前导空格应该可以解决您的问题。

var jwt = require("jsonwebtoken");

var token1 = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
var token2 = " eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";

var decode1 = jwt.decode(token1);
var decode2 = jwt.decode(token2);

console.log("without leading space");
console.log(decode1);
// { sub: '1234567890', name: 'John Doe', iat: 1516239022 }

console.log("with leading space");
console.log(decode2);
// null

【讨论】：

【解决方案3】：

这可能就像删除粘贴样本留下的额外空间一样简单。授权头是<scheme><space><value> 所以：

`var token = token.replace('Bearer ','');`

【讨论】：

【解决方案4】：

在库反应中尝试jwt-decode

安装 jwt-decode 库

npm i jwt-decode

示例代码

import jwt_decode from "jwt-decode";

const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwt_decode(token);
console.log(decoded);

【讨论】：