Javascript: Xử lý expired token như thế nào? 😎
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Đây là một chủ đề nâng cao trong javascript, khi bạn làm việc với token, chắc chắn sẽ phải đụng tới tình huống token sẽ bị expired.
Vậy mình phải xử lý bất đồng bộ lúc đó như thế nào? Cùng mình xem hết video để biết câu trả lời nhé!
#javascript #closure #expired_token
Nếu bạn có một giải pháp nào khác, hãy cùng trao đổi với mình dưới phần bình luận nha. 🙂
Link tham khảo
Code trong video: gist.github.co...
Closure: developer.mozi...
Closure from John Resig: johnresig.com/...
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì góp 5k tại đây nhé:
Ủng hộ tôi: unghotoi.com/e...
MoMo/ZaloPay: 0901 309 729
Kết nối với mình:
🎉Facebook: / nvhauesmn
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
Cảm ơn tất cả các bạn đã xem video của mình 😍
Nếu bạn có gì chưa hiểu thì thoải mái bình luận bên dưới nha.
Hoặc bạn có giải pháp khác thì cũng bình luận để trao đổi với mình nhé!
Xem lần đầu rất lâu về trước, nhưng mà nay mới đụng chuyện phải viết code xử lý expire token quay lại xem.
Vấn đề tưởng rất phổ biến và phổ thông vậy mà tìm code trên mạng vẫn không đâu bằng video của anh. Thank you so much.
wohooo ngon lành Lợi ơiiiii 😍 Rất vui khi video hữu ích cho em nè ❤️
Dù sao cũng like cho chủ thớt 1 cái. Mình chưa áp dụng cho cái token bjo. Nhưng mình từng sử dụng promise này để áp dụng cho việc lưu cache và create, update multiple vào db.
hihi cảm ơn bạn đã chia sẻ thêm một use case sử dụng kĩ thuật này nha! 👍
Dạ ví dụ access token 10s thì hết hạn, thì mình setinterval cứ 3s gọi đến api refresh token là ổn phải k anh Hậu
à nếu nó gần expired thì mình refresh để lấy cái mới luôn em nha, đừng đợi nó expired hehe
nếu e làm api check token còn thời hạn hay k?
còn thì e sẽ calll 3 api!
- Vậy nó bị tốn thời gian không ạ! vì ít nhất sẽ call 2 lần request!
- Token hết hạn! 2h0p0s nhưng khi e check 1h59p55s thì nó check token còn thời gian! trả về true!
Lúc này e bắt đầu gửi 3 request lên, thì lúc tới server 2h0p01s thì nó bị hết hạn! k lẽ faild 3 request à a!
hi Thông, để khắc phục tình trạng này em có thể refresh token sớm hơn em nha
Ví dụ check còn 5p nữa expired thì mình có thể gọi refresh token luôn hen
Cho e hỏi a thường lưu Token vào đâu vậy ạ? Và ưu điểm là gì ạ?
hi Bảo, mình lưu ở đâu phụ thuộc vào bài toán thực tế của dự án đó em nhen.
Ưu nhược điểm chắc em google giúp anh hen, tại sẽ có nhiều bài nó nói sẵn nè hihi
Hi anh, em có một thắc mắc ở phần refreshToken (em xin vt tắt là RF). Khi mà 1 RF ở client hết hạn và giả sử lúc đó người dùng đang đăng nhập. vậy khi RF hết hạn thì client tự động logout đúng không anh. Vậy làm sao để xử lý trường hợp RF hết hạn trong khi người dùng đang đăng nhập anh.
hi em, anh hk rõ câu hỏi của em lắm
cơ mà nếu RF expired thì user buộc phải login lại
user đăng nhập lại là okie em nhen, lúc đăng nhập lại thì mình ko cần quan tâm mấy cái token nữa, vì sẽ có token mới và cũng ko cần dùng token cũ để đăng nhập nè hehe
anh ơi, cho em hỏi ở đoạn code này " const newToken = await refreshTokenRequest; ".
Theo em hiểu là khi request 1 khi chạy vô đoạn code này nó sẽ call function `refreshToken ` (giả sử function này nó call api để lấy Token mới ) , còn khi request 2 và 3 nó cũng chạy đoạn code này và call function `refreshToken `( nếu vậy thì nó cũng sẽ call api để lấy token mới ).
Em hiểu vậy có đúng ko anh?
hi Mẫn ơi,
Lần 1 thì đúng
Lần 2, 3 thì do đã có gọi trước đó rồi, nên nó ko gọi nữa, mà đợi KQ trả về từ lần 1 em nha.
hehe
@@EasyFrontend Thanks anh!
- Lần 1 thì biến refreshTokenRequest sẽ được gán cho hàm refreshToken(url1) nên nó sẽ chạy hàm refreshToken(url1) và trả về cái Promise cho biến refreshTokenRequest => await refreshTokenRequest vẫn chạy
- Lần 2 và lần 3 thì biến refreshTokenRequest sẽ được gán cho chính nó (lúc này là 1 cái return promise) => hàm requestApi(url2 or url3) đã return => await refreshTokenRequest không chạy nữa
Em hiểu như thế có đúng không anh nhỉ?
yeah đúng rồi đó Tài ơi hehe 😍
1 function trả về 1 promise cũng đc gọi là closure ạ, sao lại thế anh ?
hihi closure nó ko liên quan tới vụ này (theo mình nghĩ) nhé Đức. Nói nôm na dễ hiểu thì Closure là một cái biến được định nghĩa ở ngoài cái hàm, và được sử dụng bên trong cái hàm hiện tại. 🙂Em đọc thêm về phần closure này nhé Đức hehe 🙂
Trong lần 1, flag là null nên hàm refreshAPI được gọi, trả về 1 promise chưa resolve, sau đó await cái promise này. Sang lần 2, flag hiện đang là 1 cái promise chưa resolve nên trả về chính nó, sau đó vẫn chạy dòng await đúng ko a nhỉ ? Vậy là cả 3 lần gọi api đều await chung 1 cái promise chưa resolve hả a?
hi Khang, bạn hiểu đúng rồi nhé!
Tuy nhiên, không phải cả 3 đều gọi,
mà chỉ có 1 anh đầu tiên gọi thôi.
2 anh sau là đợi KQ resolve từ anh 1
khi được resolve là cả 3 anh đều cùng chạy tiếp.
Hi vọng giải đáp được thắc mắc của bạn hihi
Anh Hậu cho em hỏi là request 1 có nhiệm vụ phát hiện expire, nếu hết hạn thì được cấp lại token mới. Trong video anh có nói request 2 và 3 thì sử dụng kết quả của request 1 có nghĩa là cả 3 request đều có 1 token mới giống nhau đúng không ạ? Nếu giống nhau thì khi cả 3 cùng gửi yêu cầu thì có cách nào để biết là yêu cầu đó thuộc về ai không ạ?
hi Huy, đúng là nó sẽ sử dụng chung 1 cái token mới em nhen, nhưng nó là 3 requests khác nhau, thông tin khác nhau nhen. Còn cái ý thuộc về ai thì a chưa hiểu ý em lắm :)
@@EasyFrontend Ban đầu em chỉ nghĩ là 3 request đều có chung 1 token thì khi cả 3 cùng gửi yêu cầu làm sao để server phân biệt được cái yêu cầu đó là của ông nào để trả về kết quả đó ạ. Nhưng anh có comment lại là 3 request khác nhau, thông tin khác nhau thì em hiểu rồi ạ :D
Lâu r mới xem lại clip của a, e cũng đang gặp case như này mà ko biết làm ntn biết cái token nó hết hạn chưa để gọi lên refresh token :v
hi em, case của anh là có expired time của token nên check dễ dàng, em hỏi bên BE, liệu có cho em thông tin expired time đc ko nhé :)
@@EasyFrontend cảm ơn a ạ! Chẳng hạn cái accessToken có hạn 1 ngày vậy thì mình dùng setTimeout để đếm đủ 1 ngày r gọi lên lấy refreshToken phải ko a nhỉ :D
@@igdev6095 em lầy vậy luôn 🤣 cách check như trong video này đó em. Lưu cái time expired, mỗi request em đi check lại cái time đó, chứ hk dùng setTimeout em nha 😅
cho e hỏi là nếu lưu token ở local storage thì trong khoảng thoi gian token còn sống nếu hacker lấy đươc chuỗi jwt đó và gửi kèm cùng lên cho mỗi req thì s ạ? Lieu co an toan k a?
à nếu jwt bị đánh cắp là nguy hiểm em nha. Có thể mình add thêm thông tin về trình duyệt / IP của request tạo ra jwt, trường hợp request lên mà từ nơi khác / trình duyệt khác thì mình chặn chẳng hạn 😉
Tuỳ vào mức độ security của dự án của em mà mình có thể add thêm nhiều tầng security cần thiết em nhen.
Hoặc 2FA này nọ, ... hehe
Cảm ơn về bài giảng rất có ích của anh.
hihi cảm ơn em nhiều nhé Quang ơi 😍
E hay xài axios để gởi request vậy thường những hàm này đc viết trong phần config của Axios đúng ko a? Mỗi request đều check token, nếu có -> gởi bth, nếu có nhưng hết hạn -> gởi request refresh token như clip, nếu ko -> redirect trang login. E hỉu vậy có đúng ko ạ ?
Yeah em hiểu đúng rồi đó Tâm ơi! 😍
A dùng kĩ thuật này trong thằng axiosClient.js ( một wrapper lại thằng axios + config + interceptors)
Anh add thêm request interceptors để check xem token có expired hay ko?
Nếu có thì anh refresh token, ko thì cứ request bình thường hehe
Liệu có thể chuyển script thành cái purejs without promise and await-async không em? Ví dụ viết với phiên bản JS cũ với jQuery chẳng hạn.
TRAN PHONG PHU dạ em cảm ơn a Phú. Cho em xin hỏi mục đích để làm gì vậy a? Có phải cho các bạn đỡ rối với synctax mới hay là nó có challenge gì ở đó vậy a? 🙂
@@EasyFrontend Một challenge vì đoạn code quá ngắn đó có thể khiến người khác hiểu chưa đầy đủ về đặc điểm của ngôn ngữ JS, single thread, bất đồng bộ v.v... nên sẽ dẫn đến nếu implement với ngôn ngữ khác thì không được ví dụ như Go thế nào?
TRAN PHONG PHU à dạ e ngộ ra rồi, hay quá a Phú 🙂 E làm hk để ý tới ngôn ngữ khác, để e research rồi thử với version như a nói xem sao hihi Có gì xong nhờ a Phú giúp em review với nhé 😉
Anh ơi cho em hỏi ngoài lề tí, vì sao token lại thường để vào headers mà k để vào body hả anh
à tại mình có cái chuẩn về header Authorization á em, nó có cái header Authorization luôn :)
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization
Em đọc thêm chỗ này nha
anh ơi làm video về Hook trong ReactJs đi a
N4mGoodMan okie bạn nhé, dự kiến là tuần sau mình sẽ làm về React Hooks nha 🙂
Hi a, e có thắc mắc này: const newToken = await refreshTokenRequest, dòng này, e thấy là request 1 vô đầu tiên, dòng này sẽ call để refresh. request 2 và 3 vô, e thấy là cũng chạy đến line này và cũng sẽ call để refresh token. Chỗ này e chưa hiểu là tại sao request 2 và request 3 lại chờ được
hi Vinh, tại cơ bản cái refreshTokenRequest() là một promise đó Vinh.
Nên 3 requests gọi vào chung 1 Promise.
Khi Promise đó được resolved thì cả 3 requests đều được chạy tiếp hehe
Kiểu 3 thằng cùng truy cập đến 1 thằng (cụ thể là refreshTokenRequest()), await của mỗi thằng sẽ đợi thằng refreshTokenRequest(), khi refreshTokenRequest() resolve xong thì 3 thằng đều được nhận giá trị và gán newToken. Sau đó ở 3 thằng đều gán refreshTokenRequest = null. Mình hiểu vậy :)))
Anh ơi, thường token nên lưu localStored hay cookie ạ?
Khánh Lê Một câu hỏi hay nè.
1. LocalStorage là do client quản lý.
2. Cookie là do server quản lý.
3. Token có thể được lưu ở cả 2 nơi tuỳ vào cách mình quản lý token. Nếu là cookie thì server sẽ quản lý cái session đó chứ không phải client.
4. Các SPA họ thường dùng localStorage để cho client quản lý nè. Nó sẽ đi lấy, lưu lại và refresh khi cần thiết, server chỉ cần quan tâm client gọi thì phải đưa token hợp lệ, ko thì trả về lỗi.
Đó là những gì anh biết, hi vọng trả lời được câu hỏi của em! 🙂
@@EasyFrontend cảm ơn anh nhiều ạ :D
bro, cho hỏi là mình hiểu vậy đúng không ạ
- khi import requestApi vào bất cứ chỗ nào trong project thì vẫn có thể truy cập được refreshTokenRequest (scope của closure) nên các request sau biết là có 1 request đang request token và chờ để lấy xong và bắt đầu chạy tiếp
Yeah nó dạng dạng như vậy đó Anh.
Mình sẽ setup một cái http lib như Axios chẳng hạn, nó là cổng http requests, tất cả các requests đều phải qua cổng này. Mình tạm gọi là axiosClient
- Tất cả requests đều đi qua axiosClient trước xong mới gửi đi lên server.
- Tất cả response trở về sẽ đi qua axiosClient trước, rồi trả về nơi gọi API.
- Handle token ở axiosClient
- Tất cả các file apis, sẽ dùng axiosClient
Nên các requests sau đều biết được cái thằng trước đó có request token hay chưa, vì bản chất tất cả đều được nằm ở axiosClient hết. 🙂
Hi vọng giải đáp được thắc mắc của bạn!
Easy Frontend đã hiểu, cám ơn bro :D , chúc bro sức khoẻ, ra nhiều video bổ ích và kênh ngày càng lớn mạnh
@@nguyenvananh2111 yeah cảm ơn Anh nhiều nha, rất vui được trao đổi với Anh nha, chúc bạn sức khoẻ, có cơ hội hãy trao đổi thêm với mình về những vấn đề khác nữa nhé 🙂
@@EasyFrontend cái này của anh rất hay ạ. giờ em mới thấm được 1 ít về bài giảng này ạ
giải pháp này chống cháy quá :))
anh ơi cho em hỏi nếu token lưu vào localStorage thì có an toàn không ạ. Em thấy nó khá dễ bị XSS
hi em, nó ko thể an toàn đc em nhen, có rủi ro nhất định hihi
nhưng nếu app của em ko có gì liên quan tới tiền thì làm dạng local storage cho đơn giản
còn nếu dính tới tiền thì phải theo cookies òi hehee
@@EasyFrontend nếu theo cookies mình set flag httpOnly thì nó có an toàn hơn so với mình lưu token trong redux store không anh.
Anh ơi, project ReactJS em đang làm sử dụng Axios để xử lý API.
Cách hiện tại em đang làm là lúc gọi API failed mà thấy lỗi 403, em gọi refreshToken() trong phần catch của chính API đó, sau đó gọi lại API 1 lần nữa. Em đặt biến count cho refresh tối đa 3 lần thôi.
Làm như này thì có đúng không anh nhỉ?
Em cảm ơn anh ạ.
à hk nên em nhen, theo cách làm của em thì trường hợp mà có 3 APIs gọi lúc bị failed --> nó sẽ gọi refresh 3 lần --> 2 cái failed, 1 cái thành công :)
Anh thì đi hướng khác, check token expired trước khi gửi request, xử lý trong request interceptor, trường hợp mà token expired anh sẽ dừng tất cả requests và đợi cho request đầu tiên đi refresh token, khi refresh thành công thì gán token đó cho tất cả requests đang đợi, rồi sau đó gửi đi hết hehe (hơi phức tạp xíu, nó giống cách anh demo trong video á)
@@EasyFrontend vậy cái này lúc nào cũng check token expired cho mỗi lần gọi API hả anh, vậy là lúc nào cũng có 2 API ( check token và request)
Trình anh chắc cũng khét lắm mới đơn giản đc ví dụ vâyh
EleCtrO WizArD hihi mình cũng tạm tạm đủ xài à bạn ơi, tại mình có từng làm qua mấy cái này nên biết thôi nè 🙂
vãi hên, e đang làm project về cái này, hay quá anh ơi
haha quá đẹp, đúng là ko có gì hay hơn là đúng thời điểm ha =))))
Mà Lâm áp dụng zô dự án được hk?
@@EasyFrontend em đang bị kẹt 1 số thứ vì chưa hiểu về nó lắm, đang đọc docs, mà anh có thời gian làm video về Oauth được không ạ ?
Khải Lâm Cái đó làm đơn giản thì cũng nhanh, mà do mỗi project làm mỗi kiểu nên hơi khó hướng dẫn. hmmm, để a suy nghĩ thử xem có cách nào demo được hk? 🙂 Trước mắt nếu khó khăn thì ping a ttao đổi hen
@@EasyFrontend ôi, cảm ơn anh nhiều
Chắc tại em chưa động đến expired token bao giờ lên thấy chưa biết áp dụng vào đâu =))), mong anh ra nhiều video về phần js nâng cao hơn nữa
Xuân Trọng haha cảm ơn Trọng nhé, mà bạn xem thì có hiểu vấn đề và cách giải quyết hk?
@@EasyFrontend em hiểu cách giải quyết r a, vì em có tìm hiểu qua closure trong js rồi
Xuân Trọng à vậy thì cool quá 👍
☕️ hôm nào rãnh ra video cách config service để call api bằng axios hay fetch js đi huynh
i'm Doshi Yessss, trong plan của mình cũng có cái này khà khà, hay quá bạn. Hi vọng video này sẽ ra sớm 😉
a ra nhiều video về js nữa nhé
Toan Mai Okie Toàn, cảm ơn bạn đã ủng hộ mình nhé! 🙂 Bạn có đụng tới vấn đề expired token này chưa Toàn?
Nếu trong dự án thì phần này sẽ được viết ở đâu vậy anh?
hi Lim, cái này mình sẽ viết trong cái axiosClient/fetchClient em nha 😉
@@EasyFrontend Anh Hậu ơi, e làm, sau khi token hết hạn -> call refreshToken -> trả về success, nhưng nó k gọi tiếp API trước đó ý a
Hay quá luônnnnn
hihi cảm ơn e nhiều nhé Cường 😉Em có xử lý dạng này bao giờ chưa ? 🙂
Hôm nao anh làm về refesh token trong react đi anh.
Always supported 🌻
hehe cảm ơn em nhiều nhé Chiến ơi, mà phần này thì cần có backend support nữa mới làm được nè hihi
Cảm ơn bro :))) Lần đầu xem vdeo anh, rất bổ ích. Mong anh ra nhiều video .
hihi cảm ơn Tình nhé, a có làm mấy videos khác nữa ở đây th-cam.com/channels/G2ovypNCpVOTFeY1YCocmQ.htmlvideos Em có thể tham khảo thêm nha. :)
JS có 4 bài à anh
hi em, anh hiện ko có làm full bên JS nên chỉ chia sẻ một vài topic bên JS à em ơi.
Nếu em có quan tâm tới topic nào thì có thể suggest cho anh nhé hehe
@@EasyFrontend vậy anh có chuyên bên reactjs vs redux không ạ. Em cảm ơn
VÌ em đang muốn học reactjs và redux, nhưng chưa tốt về js và typescript ạ
@@sportmusic9759 à nếu vậy thì em nên cũng tìm hiểu và học nền tảng của JS trước nha. Không thôi em cứ bay đi học reactjs thì cũng ko hiểu rõ được bản chất bên dưới, khó phát triển lên nè 🙂
@@EasyFrontend vâng ạ. Em cảm ơn
Gãi đúng chỗ ngứa luôn a ơi :))
Tks a
Khánh Lê Cảm ơn Khánh nhé! 🙂
Good video
trungbuu nong Cảm ơn bạn nhé 🙂
Em rất thích kênh của anh, ngày nào cũng hóng Video mới.
Em đang học về thao tác API với Spotify để lấy các bài hát. Tuy nhiên em đang vướng vụ expired access token của Spotify (cứ sau 1 h là hết hạn). Em chưa tự refresh được. Nếu anh mà có điều kiện anh làm một video đơn giản với Spotify thì anh em sẽ mở mang hơn rất nhiều.
Em cảm ơn
à cảm ơn Dương nhé, còn tuỳ project bạn setup thế nào nữa nên mình hk biết sẽ làm cho đúng với cái của bạn. Nhưng bạn có thể trao đổi cụ thể hơn với mình bên Facebook nha 🙂
Cảm ơn bạn đã ủng hộ mình rất nhiệt tình nha! ❤️
@@EasyFrontend Thế để hôm nào cuối tuần , cho phép em tham khảo ở anh một số thứ về vấn đề refresh token với ạ.
Thuy Duong okie Dương nha hehe
kho hieu qua
yeah topic này hơi rối não hihi
@@EasyFrontend a giải thích quả flow async funtion chạy xog xog đi a