访问 jwt-decode 对象时出现打字稿错误答案

【问题标题】：Typescript error with accessing jwt-decode object访问 jwt-decode 对象时出现打字稿错误
【发布时间】：2020-07-26 16:46:51
【问题描述】：

我已经安装了@types/jwt-decode，但我无法让它工作。

import jwtDecode from 'jwt-decode'

...
let decodedToken = jwtDecode(token);
console.log(decodedToken) // this works! I can see the full object
console.log(decodedToken.exp) // error Object is of type 'unknown'.ts(2571)

【问题讨论】：

只要我提供包含exp 声明的令牌，我对您的代码（使用包 jsonwebtoken）没有任何问题。您没有向我们展示令牌或console.log(decodedToken) 的结果。是否包含exp？

标签： typescript jwt

【解决方案1】：

问题是jwtDecode 不知道令牌中的内容，因为它可能是任何东西。因此，它使用 unknown 类型来表示解码 JWT 的结果是未知的。

要解决这个问题，您需要创建一个 interface 来描述您期望在 JWT 中的内容，并告诉 jwtDecode 将其用作解码令牌的返回类型。你可以这样做：

interface MyToken {
  name: string;
  exp: number;
  // whatever else is in the JWT.
}

const decodedToken = jwtDecode<MyToken>(token);
console.log(decodedToken.exp); // works!

【讨论】：

【解决方案2】：

现在在 v3.1.1 上，最近添加了类型定义。

import jwt_decode, { JwtPayload } from 'jwt-decode'

const decodedToken = jwt_decode<JwtPayload>(token)

@Martina 在 cmets 部分也添加了，解析非标准声明也可以通过扩展 JwtPayload 接口上的类型来创建自定义 jwt 有效负载类型，例如：

type customJwtPayload = JwtPayload & { some_property: string };

然后，

const decodedToken = jwtDecode<customJwtPayload>(token);

【讨论】：

感谢您的提示。为了解析非标准声明，我将它与这样的扩展类型一起使用： type customJwtPaylod = JwtPayload & {preferred_username:string};让解码 = jwt_decode(token); console.log(decoded.preferred_username);

【解决方案3】：

我已经完成了这项工作并为我工作。

yarn add jwt-decode
yarn add -D @types/jwt-decode

这是已实现的用于检查令牌的功能：

import jwtDecode, { JetPayload } from 'jwt-decode'

const token = localStorage.getItem('token');
if (!token) return
const decodedToken: JwtPayload = jwtDecode(token);
if ((decodedToken?.exp as JwtPayload) < new Date().getTime()) {
  // code here
}

下面的 sn-p 对我有用，并在我尝试验证 decodedToken.exp 时删除错误

【讨论】：