React - 在發送郵寄請求之前如何檢查JWT是否有效？

Question

另一個noob問題。我使用JWT授權將用戶登錄到系統，獲取令牌並將其保存在localstorage中，然後發送保存數據（基本上是一個大表單）的發佈請求。問題是，服務器在給定時間（20分鐘左右）後令該令牌無效，因此，我的一些帖子請求正在返回401 status。如何在發送發佈請求之前驗證（如果需要，請顯示登錄提示）？我使用redux-form來製作我的表格。 P：我知道我應該使用行動創造者等，但我仍然是一個新手，所以不太擅長這些東西。

這裏是我的身份驗證：

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); 
    }); 
}); 

PPS：如果任何人有改善我的代碼的任何建議，隨時發表評論。

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，則表示令牌已過期。