Created
October 6, 2020 03:37
-
-
Save thanhzusu/fa919766511c77f04ba669df611d2a05 to your computer and use it in GitHub Desktop.
How to refresh expired token in JS?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ❓ Chuyện gì xảy ra nếu giữa chừng token bị expired? | |
// Ví dụ: 3 api requests đồng thời với nhau | |
// TRƯỜNG HỢP 1: Token chưa expired, vẫn còn tốt chán 🤣 | |
// --request 1--> | |
// --request 2--> | |
// --request 3--> | |
// TRƯỜNG HỢP 2: Token bị expired, sóng gió kéo tới 🥴 | |
// --request 1--> refresh token 1 --> failed | |
// --request 2--> refresh token 2 --> failed | |
// --request 3--> refresh token 3 --> success | |
// GIẢI PHÁP | |
// --request 1--> (phát hiện token expired) | |
// --request 2--> (những requests đến sau phải đợi token trả về) | |
// --request 3--> (dù có bao nhiêu requests thì vẫn phải đợi) | |
// Cái này giả bộ | |
// Thực tế bạn phải kiểm tra thông tin từ token | |
// để biết là token có bị expired hay chưa | |
// còn ở đây làm video nên mình gán luôn giá trị cho lẹ | |
const isTokenExpired = true; | |
let token = 'Current token'; // thường lưu trong local storage | |
const refreshToken = (url) => { | |
console.log('Refresh token url: ', url); | |
return new Promise(resolve => { | |
setTimeout(() => { | |
console.log('\n'); | |
resolve('Yes, this is a new token 😎'); | |
}, 3000); | |
}); | |
}; | |
// closure: to save the refreshTokenRequest | |
let refreshTokenRequest = null; | |
const requestApi = async (url) => { | |
if (isTokenExpired) { | |
console.log('requestApi: Ooops ... token expired: ', url, token); | |
refreshTokenRequest = refreshTokenRequest | |
? refreshTokenRequest | |
: refreshToken(url); | |
// 1 --> null --> refreshToken | |
// 2 --> refreshToken --> refreshToken | |
// 3 --> refreshToken --> refreshToken | |
const newToken = await refreshTokenRequest; | |
// reset token request for the next expiration | |
refreshTokenRequest = null; | |
token = newToken; // thường update token trong localStorage | |
console.log('requestApi: Fetch data with new token: ', url, token); | |
return; | |
} | |
console.log('Fetch data: ', url, token); | |
}; | |
// --------------- | |
// MAIN LOGIC | |
// --------------- | |
const main = () => { | |
// ví dụ 3 requests này đến từ 3 nơi khác nhau trong app của bạn | |
// bạn không thể biết cái nào chạy trước, chạy sau | |
// và cũng không thể biết cái nào nên đợi cái nào | |
requestApi('/me'); | |
requestApi('/shops'); | |
requestApi('/products'); | |
}; | |
main(); | |
// 📝 Nhớ nè | |
// - Áp dụng closure để xử lý bất đồng bộ. | |
// - Token phải được lưu dưới localStorage để đảm bảo sync token giữa các tabs. | |
// - Trong video này, mình dùng NodeJS để chạy JS, chứ hk phải browser. | |
// - Chắc chắn bạn sẽ gặp vấn đề này nếu bạn có xử lý expired token. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment