如何检查给定值是否是私有路由中的 JWT？

Question

目前我有以下用于私有路由的 React 组件

    import { Route } from 'react-router-dom';
import React from 'react';
import { Redirect } from 'react-router';
import Cookies from 'js-cookie';
import jwtDecode from 'jwt-decode';
export default ({ component: Component, render: renderFn, authed, name, ...rest }) => {

  var decoded = [];
  decoded.permited = [];
  var accesstoken = Cookies.get('accesstoken');


    if((accesstoken)){
    var decoded  = jwtDecode(accesstoken)
    }

  return ( //Second case is for iframe based renders
    <Route {...rest} render={props => ((authed === true) && (decoded.permited.includes(name) === true)) ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />} />
  );

}

它工作正常，如果没有带令牌的 cookie，它会重定向到登录。如果有，它会评估令牌中包含的您的权限，并根据该权限让您输入特定路线或否。

当我插入一个带有随机值的 cookie 时，例如 "undefined" 或 "thisisarandomstring"，就会出现问题。当我这样做时，函数

 if((accesstoken)){
var decoded  = jwtDecode(accesstoken)
}

一直执行，jwtDecode崩溃，所以应用崩溃。

我需要一种方法来在尝试解码之前检查传递的参数是否是 accesstoken。或者类似的东西让它不会崩溃。

我试过这样的东西

    export default ({ component: Component, render: renderFn, authed, name, ...rest }) => {

  var decoded = [];
  decoded.permited = [];
  var accesstoken = Cookies.get('accesstoken');

  console.log("first value")
  console.log(accesstoken)

 if(accesstoken === "undefined"){
  console.log("value after equaled string")
   accesstoken = undefined
   console.log(accesstoken)
 }
    if((accesstoken)){
      console.log("value in the decode")
    var decoded  = jwtDecode(accesstoken)
    }

  return ( //Second case is for iframe based renders
    <Route {...rest} render={props => ((authed === true) && (decoded.permited.includes(name) === true)) ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />} />
  );

}

如果检测到的字符串未定义，则尝试将值强制为真正的未定义，但无论如何它都会崩溃，因为出于某种原因它仍然进入该解码 if.

我做了那个相等的检查，因为我的应用程序有时会设置一个值为 "undefined" 的字符串，因为一些我似乎无法在其他地方找到的不受控制的错误，所以我想从私有路由中控制它.

但无论如何，理想的情况是在尝试解码之前检查它是否具有 jwt 格式或类似格式。

知道我能做什么吗？

编辑：更多信息

它真的永远不会超过 jwtDecode() 函数，因为它 returns 一个错误

InvalidTokenError {message: "Invalid token specified: Cannot read property 'replace' of undefined"} message: "Invalid token specified: Cannot read property 'replace' of undefined"

所以我不太确定如何处理，因为应用程序当场崩溃，无法处理任何事情

Answer 1

如果你需要在传递给jwtDecode之前捕获错误的令牌，你可以检查结构。 JWT 由 3 部分组成，由 . 分隔，前两部分是 base64url 编码的 JSON 对象，并且始终以 ey () 开头所以你可以检查令牌是否：

有 3 个段，由 . 分隔，即 ..
前两段以 ey
这三个部分都只有base64url字符集中的字符。

这应该非常确定它是 JWT。这当然不能保证，当您使用 "eyXXX.eyXXX.ABC" 进行测试时，检查通过但解码仍然失败。

在简单的情况下，当 jwtDecode returns null 用于无效令牌时（我在 node-js 上使用包 jsonswebtoken 并且它确实 returns 只是 null 在这种情况下）你可以做一个简单的空检查：

var decoded  = jwtDecode(accesstoken)
if (decoded == null)
{
  console.log("not a valid token")
  // your error handling
}
else
  // continue with decoded token

Answer 2

import { Route } from 'react-router-dom';
import React from 'react';
import { Redirect } from 'react-router';
import Cookies from 'js-cookie';
import jwtDecode from 'jwt-decode';
export default ({ component: Component, render: renderFn, authed, name, ...rest }) => {

  var decoded = [];
  decoded.permited = [];
  var accesstoken = Cookies.get('accesstoken');

  if ((accesstoken)) {
    try {
      var decoded = jwtDecode(accesstoken)
    } catch (err) {
     Cookies.remove('accesstoken')
    }

  }

  return ( //Second case is for iframe based renders
    <Route {...rest} render={props => ((authed === true) && (decoded.permited.includes(name) === true)) ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />} />
  );

}

使用 try catch 块，在 catch 中我删除了 cookie，因此它不会使应用程序崩溃，因为显然这是造成它的原因之一，因为 cookie 被挂在那里

如何检查给定值是否是私有路由中的 JWT？

How to check that a given value is a JWT in a private route?

javascript

jwt

reactjs

jwt-auth