javascript - React - 如何在发送 post 请求之前检查 JWT 是否有效？

Question

另一个菜鸟问题。我正在使用 JWT 授权将我的用户登录到系统，获取 token 并将其保存在 localstorage 中，然后发送一个保存数据的发布请求(基本上是一个大表格)。问题是，服务器在给定时间(20 分钟左右)后使 token 无效，因此，我的一些发布请求返回 401 状态。在发送发布请求之前如何验证(如果需要，显示登录提示)？我正在使用 redux-form 制作我的表格。

P.S:我知道我应该使用 Action 创建器等，但我还是个新手，所以不太擅长这些东西。

这是我的身份验证:

export function loginUser(creds) {

const data = querystring.stringify({_username: creds.username, _password: creds.password});

let config = {
    method: 'POST',
    headers: { 'Content-Type':'application/x-www-form-urlencoded' },
    body: data
};

return dispatch => {
    // We dispatch requestLogin to kickoff the call to the API
    dispatch(requestLogin(creds));

    return fetch(BASE_URL+'/login_check', config)
        .then(response =>
            response.json().then(user => ({ user, response }))
        ).then(({ user, response }) =>  {
            if (!response.ok) {
                // If there was a problem, we want to
                // dispatch the error condition
                dispatch(loginError(user.message));
                return Promise.reject(user)
            } else {
                // If login was successful, set the token in local storage
                localStorage.setItem('id_token', user.token);
                let token = localStorage.getItem('id_token')
                console.log(token);
                // Dispatch the success action
                dispatch(receiveLogin(user));
            }
        }).catch(err => console.log("Error: ", err))
    }
}

这是 POST 请求(我从 redux-form 获取 values 对象)

const token = localStorage.getItem('id_token');
const AuthStr = 'Bearer '.concat(token);

let headers ={
headers: { 'Content-Type':'application/json','Authorization' : AuthStr }
};

export default (async function showResults(values, dispatch) {
axios.post(BASE_URL + '/new', values, headers)
    .then(function (response) {
        console.log(values);
        console.log(response);
    })
    .catch(function (error) {
        console.log(token);
        console.log(values)
        console.log(error.response);
    });
});

P.P.S:如果有人对改进我的代码有任何建议，请随时发表评论。

Answer 1

可以通过两种方式检查 JWT 过期时间。首先，您必须安装 jsonwebtoken 包并在文件顶部要求它。此后，您可以按照以下方式在发送任何休息请求之前检查 JWT 过期时间。

选项 1

var isExpired = false;
const token = localStorage.getItem('id_token');
var decodedToken=jwt.decode(token, {complete: true});
var dateNow = new Date();

if(decodedToken.exp < dateNow.getTime())
    isExpired = true;

选项 2

const token = localStorage.getItem('id_token');
jwt.verify(token, 'shhhhh', function(err, decoded) {
  if (err) {
    /*
      err = {
        name: 'TokenExpiredError',
        message: 'jwt expired',
        expiredAt: 1408621000
      }
    */
  }
});

检查该方法的错误。如果是 TokenExpiredError，则表示 token 已过期。