如何檢測 jwt 令牌在 React 上過期

Question

使用后端 node.js，我創建了一個帶有過期時間的 JWT 令牌：

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

使用前端 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 都需要此令牌進行授權，我將在 header 中傳遞此令牌。 我在 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 和反應路由器。

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

可以補充給出的答案是，假設您設置 jwt 令牌從現在開始持續 10 天，您將執行以下操作： 10 * 24 * 60 * 60 * 1000所以這將設置從現在開始的 10 天（以毫秒為單位）。

現在，當您在服務器中收到以毫秒為單位的過期令牌時，您現在要做的是，不要等待收到錯誤消息，但您要做的是比較令牌中的日期（以毫秒為單位）是否大於當前日期，然后如果那是真的，那么你知道令牌仍然有效......

選擇

由於您已經將 Jwt 存儲在 localStorage 中，因此您可以切換到存儲在 Cookie 中確實沒有什么區別，但從某種意義上說，一旦令牌過期，它將從您的 cookie 存儲中刪除，從而使服務器驗證變得容易，即如果 cookie 沒有發送它表示它已過期，但這僅適用於存儲在 cookies 中時