如何在React上检测jwt代币过期

Question

使用后端node.js，我创建了一个具有过期时间的JWT令牌：

signToken = (user) => {
return jwt.sign({ id: user.userId }, process.env.JWT_SECRET, { expiresIn: 60 * 60 * 24 * 10 }) // 1h = 60 * 60
}

使用fronend React应用程序，当用户登录时，我会将此JWT令牌与返回数据一起传递，并将其保存到本地存储(我使用的是Redux(：

const result = await userLogin({ username, password })
dispatch({ type: USER_LOGIN_SUCCESS, payload: result.data.data })
const { userReducer } = getState()
window.localStorage.setItem("accessToken", JSON.stringify(userReducer.token))

每个api都需要这个令牌进行授权，我会在头中传递这个令牌。我在axios请求拦截器中设置了它：

instance.interceptors.request.use(
(config) => {
const accessToken = localStorage.getItem("accessToken")
config.headers.Authorization = accessToken ? `Bearer ${accessToken}` : ""
if (config.url.includes("/files/")) {
config.headers["Content-Type"] = "multipart/form-data"
}
return config
},
(error) => {
return Promise.reject(error.response)
}
)

我的问题是如何检测React上的令牌是否过期。有了这个React应用程序，我正在使用axios、redux、React redux和React路由器。

Answer 1

我同意Cory的评论，即您应该在服务器而不是客户端上进行验证。如果你想做一些基本的检查，假设你的JWT主体没有加密，下面的内容会起作用。

// Some fake JWT I made using an online builder
const exampleJWT = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSldUIEJ1aWxkZXIiLCJpYXQiOjE2MDc0MDc3NTYsImV4cCI6MTYzODk0Mzc1NiwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViIjoianJvY2tldEBleGFtcGxlLmNvbSIsIkdpdmVuTmFtZSI6IkpvaG5ueSIsIlN1cm5hbWUiOiJSb2NrZXQiLCJFbWFpbCI6Impyb2NrZXRAZXhhbXBsZS5jb20iLCJSb2xlIjpbIk1hbmFnZXIiLCJQcm9qZWN0IEFkbWluaXN0cmF0b3IiXX0.cfBNHOIaUSAVtLHbxlOmMZtp-giA7-v8yJpMyGooefE`;
function getPayload(jwt){
// A JWT has 3 parts separated by '.'
// The middle part is a base64 encoded JSON
// decode the base64 
return atob(jwt.split(".")[1])
}
const payload = getPayload(exampleJWT);
const expiration = new Date(payload.exp);
const now = new Date();
const fiveMinutes = 1000 * 60 * 5;
if( expiration.getTime() - now.getTime() < fiveMinutes ){
console.log("JWT has expired or will expire soon");
} else {
console.log("JWT is valid for more than 5 minutes", payload);
}

Answer 2

好的，在给出的答案的基础上，假设你设置了从现在起持续10天的jwt令牌，你会做这样的事情：10 * 24 * 60 * 60 * 1000，所以这将以毫秒为单位设置从现在起的10天。

现在，当您在服务器中接收到以毫秒为单位的过期令牌时，现在您要做的是，不要等待获得错误消息，而是进行比较如果令牌中的日期(以毫秒计(大于当前日期，则如果为真，则您知道令牌仍然有效。。。

替代

由于您已经将Jwt存储在localStorage中，因此您可以切换到存储在Cookie中。这确实没有什么区别，但会有所帮助，因为一旦代币过期，它将从您的Cookie存储中删除，从而简化服务器验证，即如果未发送Cookie，则意味着它已过期，但这仅适用于存储在Cookie 中的情况