Transcript for:
Xử lý trường hợp Token hết hạn

video này thì chúng ta sẽ đi à xử lý cái trường hợp đó là khi mà s Token của chúng ta nó hết hạn thì chúng ta xử lý như thế nào đúng không Thì hiện tại ấ thì các bạn đã biết rằng là mình lưu cái phên đă nhập của người dùng thông qua Cookie đúng không thì khi mà session hết hạng ấ thì mình sẽ xóa cái Cookie này đi đó mình xóa cái Cookie này Cùng với đó là mình cũng cho người ta log out ra luôn cho Trữ về cái Trang logout à Sorry Trữ về cái Trang loging nhá nhá Ừ Thì đấy là cái flow của mình à chúng ta sẽ quay lại cái sơ đồ của chúng ta một tí xíu thì cái session Token nó hết hạn trong những cái trường hợp nào thì chúng ta thấy là đây là cái hệ thống web của chúng ta Đúng không Chúng ta có next C có next server và có server back end thì chúng ta chúng ta gọi api ở đâu thì ở đây chúng ta có gọi api từ thằng à next client chúng ta gọi từ next client để đến server back đúng không là một cái này là gọi từ client component đến server back này tiếp theo nè gọi từ server component gọi từ server component đến à server backend là hai ông rồi Ông nào nữa à Gọi từ ông next cl gọi từ ông next cl gọi đến ông n server đấy chúng ta gọi khá là nhiều nha thì đầu tiên mình sẽ xử lý cái trường hợp đầu tiên đã nha cái trường hợp thứ nhất đó là cái ông next clent gọi đến cái server backend có nghĩa là gọi từ client cent gọi trực tiếp đến server backend giống như là mấy cái giống như là mấy cái loging của chúng ta ấy Các bạn thấy không loging Chúng ta này đấy chúng ta gọi từ client component này gọi trực tiếp đến server backend thì ở đây mấy cái ipi này thì nó không yêu cầu Cooky nhưng mà một số ipi các bạn gọi ở lên đó thì chúng ta C phải xử lý thì ở đây khi mà gọi đến như thế này Ừ server backend nó trả về à Cái lỗi gọi là Token hết hạn hoặc là Token không khái dụng đi chẳng hạn thì chúng ta sẽ lockout ra Ừ cái điều này các bạn cần phải thông nhắc với backend đó là à các bạn hỏi backend là backend phải trả về một cái lỗi gì đấy Kiểu như là khi nào mà mấy cái lỗi liên quan đến authentication á thì nên trả về một cái format nhất định chứ đừng có lúc này là lỗi này lúc này là lỗi kia thì như thế Chúng ta sẽ rất là khó để xử lý logic nha Thì ở đây bend của mình là cứ những cái lỗi mà liên quan đến Token ấy thì cứ trả về 401 và Cái thằng nment nó mà nó nhận thấy lỗi 401 ấy Cái lỗi mà status 401 ấ thì nó sẽ cho lockout ra đó thì đây là cái quy ước của mình nha Thì mỗi cái dự án thì sẽ có một cái quy ước khác nhau Ví dụ như một số cái dự án của các bạn nó quy ước là status 40 01 ngồi ra thì còn có một cái mã code gì đấy nữa đấy thì cũng tùy nha Cái này chúng ta linh động chứ không nên là cứ cứng nhắc giống như mình cái này thì lin động mỗi bên back thôi Thì bây giờ mình sẽ xử lý trước ở cái thằng clan gọi đến đây logout thì mình sẽ xử lý ở cái thằng là sttp nhá interceptor thì cl rất là dễ mọi người chúng ta xử lý ở interceptor này bởi vì mọi cái Mọi cái request nó đều qua cái intercept sttp K đó Ừ rồi Đây là nếu mà cái này nó không có Ok thì nó nhảy vô đây Nếu mà status Đây là status 422 nhá Rồi bây giờ mình sẽ làm cái status à 401 khai báo một cái status 401 ở trên này constant nè sttp này à Sorry đây là authentication status đó đây là 401 nhé Rồi mình sẽ xuống phía dưới này à Chỗ này mình sẽ tắt C Block đi elseif Sorry mọi người sau nay máy nó cứ bị nhảy chữ khó chịu ghê ấy rồi ch status nếu mà nó bằng cái authentication eror status chính là nó bằng cái 401 ấy thì mình sẽ sẽ gọi cái api logout ha Gọi api logout đây là gọi ở clent nha Thì như mọi người đã biết rằng cái file này nó có thể gọi ở server cũng có thể gọi ở client đúng không Mình nói Đấy mình dùng cái file này mình gọi ở server coment và mình cũng dùng cái file này mình gọi ở cl component nên là có thể những cái logic này nó vừa chạy ở server vừa chạy ở clent nhưng mà bây giờ mình đang check cái trường hợp là là là client thôi nên là mình cần phải If thêm một cái nữa ha If t Windows mà nó khác inde define ấ có nghĩa là chúng ta đang ở clan nè Chúng ta đang ở clan thì chúng ta sẽ gọi ait f rồi gọi đến cái à Mọi người nhớ cái api logout của mình không nhớ không Nếu như mà mọi người đã quen ấ thì mình sẽ mở lại cho mọi người xem ha Mình có một button logout nè put logout thì đây là cái api logout n from next client to next server à đó Đây chính là cái api logout của chúng ta nha rồi thì chúng ta cứ gọi cái thằng này là được n gch api gch ipi này g n out g lockout nó gọi đến cái row handler này nè các bạn nhớ không row handler đây này đây này chính là cái row handler này này rồi Chỗ này mình sẽ cho nó có cái gì nữa Ở đây thì chúng ta sẽ có method là gì method hst là post này à body ở đây một số bạn sẽ nói Mình ở tại sao bên này mình có khai báo rồi à bên này mình có khai báo Mấy cái này rồi đây bên này mình có khai báo tại sao mình không dùng luôn Mà mình phải sử dụng lại thực ra mình không thích lắm Bởi vì đây là một cái file gọi là mọi người cứ tưởng tượng Đây là một cái function cơ sử đây một cái function cơ sử Còn đây là một cái function mà nó được tạo ra từ một cái function cơ sở thì mình không muốn là sử dụng thằng cơ sở này lại đi sử dụng với thằng này các bạn hiểu ý mình không đó thằng cơ sở thì nó nên sử dụng những cái cơ sở thôi à cái body của mình thì mình J Jason này CH stringify này thì mình sẽ truyền lên một cái object rỗng như thế này Ừ rồi chỗ này à method à Có method rồi đúng không chỗ này mình có thêm một cái header nữa nhá header thì mình sẽ dùng lại cái thằng base header này n đây thì cái thằng p header thì nó có cái gì Mọi người p header thì nó có mỗi cái content type thôi Còn cái authorization này thì tất nhiên là không có rồi authorization này các bạn lấy ở server mà à Sorry mọi người authorization này thì có không ta ví dụ như mà cái Token của chúng ta nó hết hạn đi Token hết hạn thì chúng ta truyền auto gation truyền lên hay không truyền lên thì cũng vô nghĩa đúng không nó hết hạn rồi thì nó không còn ý nghĩa gì nữa ừ rồi nếu như mà nó hết hạn thì sẽ xảy ra một cái vấn đề mọi người ạ Đây là cái row handler là cái ipi bên next server ấ mọi người nếu như mà nó hết hạn ấy thì bên next server chúng ta sẽ không có log out cái đoạn logic này được đấy Nên là ở đây mình sẽ xử lý một tí xíu cái thằng này thì đây là cái function Đây là một cái lockout flow handler của mình thì mình sẽ mình sẽ lấy cái body chỗ này mình sẽ đây constant à request bằng AW này request ch json thì đây là chúng ta sẽ lấy được cái body nha rồi mình sẽ lấy cái giá trị gọi là force force này có nghĩa là mình sẽ truyền từ client L bằng respon force for à s Thì cái này nó có thể là bulling hoặc là undefine đó thì nếu như mà thằng cl nó truyền lên là force ấ có nghĩa là é buc phải log out Dù cho có se to hay không đó fook phải lockout ví dụ như trong cái trường hợp mình nói trường hợp s Token nó hết hạn đi thì chúng ta không thể xử lý cái đoạn logic này được đúng không Chúng ta chỉ muốn là à s Token hết hạng thì logout ra xóa cái Cooky đi đó thì mình sẽ sữ lại chỗ này nhá force này nếu như mà thằng client nó truyền lên một cái giá trị là force nằm trong cái body thì mình sẽ Return respond mình sẽ copy cái đoạn này copy cái đoạn này n Mình chỉ muốn xóa đi cái Cookie Mình chỉ muốn xóa đi cái cookie chỗ này mình sẽ trả về một cái message đi message là buộc Đăng xất thành công nhé Rồi và status mình sẽ cho 200 rồi Chỗ này thì chúng ta sẽ xóa đi cái Cooky đúng không à x Cooky thì ở đây mình sẽ giữ nguyên như th này là đúng rồi ok Còn Không ấ thì nó sẽ nhảy xuống cái logic phía dưới này đ không th nhảy xuống logic phía dưới rồi ok thì mình sẽ lưu đoạn này lại mình sẽ qua bên cái sttp này mình sẽ ké xuống mình check coi một tí xíu ha rồi đây mình sẽ truyền lên một cái Force for mình sẽ trên là true nha sau khi mà logout thành công thì chúng ta làm gì nữa chúng ta client n ch session Token ch value thì chúng ta set nó lại rỗng nha Đó cái giá trị Chúng ta đang ở client Mọi người nhớ nha Chúng ta đang ở client này và mình sẽ cho nó redirect sang cái pay Pay loging ứ location n ch href thì đây để mà dùng được cái location này thì chúng ta cần phải ở trong client nha Nhớ nha các bạn xử lý mà cái này mà ở server thì cái location này nó sẽ bị lỗi đấy loging đấy rồi Còn nếu như mà ở server thì làm cách nào đó nếu ở server thì làm cách nào thì bây giờ ừm bây giờ mình test đã bây giờ mình test ra ha test coi thử nó có được hay không đã rồi tính đến cái chuyện server ở đây mình còn thiếu một cái trường hợp E nha ấy ở đây cái logic chỗ này này thiếu một cái trường hợp E nha Thì Test Test thử đã các bạn mở cái page mi của mình lên cái page MI chính là cái page Mà mình xử lý đúng không mi. p pay me này mình đang gọi cái thằng à api account này account me thì mình gọi cái này ở server coment nên là mình tạm thời mình chưa xử lý cái logic này mà nên mình sẽ comment cái này lại comment lại đúng không Comment lại đi rồi trong cái page me này mình có dùng một cái thằng profile thì thằng profile này chính là h client component của mình và mình gọi cái account Me Từ client đó nên mình sẽ test đó có nghĩa là khi mình vô cái p me thì cái thằng II này nó sẽ gọi Nếu như mà nó thấy mà hết hạn thì nó sẽ phải log out ra cho mình rồi bây giờ mình sẽ test nha hí hạn hay không hí hạn thì rất là đơn giản có hai cách để các bạn fake các bạn làm cái trường hợp này một ấ là các bạn edit lại cái giá trị session Token này nè các bạn thêm cái chữ gì đấy vô cũng được thì khi mà edit lại thì cái session Token của các bạn nó không có giống với trên database ý đây nó không có giống database thì nó sẽ server của mình ấy nó sẽ tự động trả về cái lỗi 401 cho các bạn hoặc là các bạn xóa đi xóa bà mấy cái S Token trên database đi đấy thì cái thằng này nó không có tồn tại trên database nữa thì mình F5 lại nhá đấy các bạn thấy không F5 lại nó nhảy sang login liền thì chúng ta qua bên cái Tab Network chúng ta coi Điều gì đã xảy ra nhá thì khi mà mình F5 lại thì các bạn không thấy các bạn không có thấy cái gọ cái phần gọi ipi của mình đúng không các bạn dụ á Ông nói là ông có gọi cái thằng logout ở cl mà sao tôi nhìn tôi không có thấy thì ở đây mình các bạn để ý nha Cái thằng location chh bằng login này nè thì đây là một cái chuyển trang mà gọi là full relog ấ mọi người là nó giống như là các bạn relog enter vào cái trang login vậy đấy Nên là cả cái page của các bạn nó relog lên Nên là các bạn không có thấy nó gọi ở chỗ này nhá đó còn không thì các bạn có thể C lock đi thì các bạn sẽ check được đấy đã đang xất này để mình làm lại cho các bạn xem nhá Đấy rồi mình é Nam lại này thì ở đây bình thường nó như thế này nhá à xóa đi cái Token này nè thì bạn nào mà bây giờ mà còn hỏi về cái ui Tại sao anh lại có được cái này thì các bạn cứ vào trong cái CD vào trong cái server của mình ấy dùng cái quốc Pháp mpx prisma studio như bạn nào mà quen thì thì quay lại cái phần gọi là cái video giới thiệu về cái ipi của mình ấy nằm trong cái series này luôn giới thiệu về ipi khóa học thì các bạn sẽ biết được ha rồi mình xóa đi cái session Token mình enter lại n em thì các bạn sẽ thấy đó nó gọi me này nó gọi mi nó trả về 401 nè đấy Gọi mi trả về 401 thì như mình nói 401 là liên quan đến section mình sẽ cho nó log out ra luôn đấy thì nó sẽ gọi cái ipi logout luôn Mọi người thấy không Nó gọi luôn cái ipi logout ra à ở đây mình thấy nó gọi hai cái ipi logout À rồi Ở đây thấy nó gọi hai cái ipi logout luôn Mọi người thì tại sao nó gọi hai cái api lockout Thì bởi vì do cái thằng này nó gọi hai lần cái thằng này nó gọi hai lần mà thì nó gọi hai cái ipi lockout thì chúng ta có thể xử lý cái đoạn logic này cũng được à Chỗ này thì chúng ta ở chỗ này chúng ta có thể hạn chế cái việc mà gọi logout liên tục nhé chúng ta có thể gọi logout một lần thôi Nếu như mà chuủng ấ thì chúng ta xử lý cái bên này cái bên mà b lockout này đó Sorry cái bên mà profile này do mình đang ở cái chế độ strict Mode đấy Mọi người chế độ strict Mode nên là cái thằng profile này nó bị gọi hai lần nó bị gọi hai lần nên là thành ra là cái cái cái function f request này nó gọi hai lần nên là nó gọi cái logout hai lần đấy thì chúng ta chúng ta có thể xử lý cái đoạn logic [âm nhạc] này để mình xem xử lý á Đây là cái request của mình đúng không mình sẽ led n led gọi là client logout request mình sẽ cho nó bằng nun nhé mình sẽ cho nó bằng nun à khi mà cái thằng này nó gọi rồi Khi mà để lockout này Cái thằng này gọi thì mình sẽ cho let cl logout request mình sẽ cho bằng cái này nha mình sẽ cho bằng cái thằng [âm nhạc] này và phía dưới này mình sẽ awa client LCK out request này Ok cái trên này mình sẽ check Nếu mà cái thằng cl lock out request của mình cl lock client logout request của mình nó không có thì mình mới à mới gọi còn không thì mình không có gọi như thế thì nó sẽ không có bị duplicate nữa r chúng ta check thử nè chúng ta check thử nè Bây giờ đang ở Đăng nhập đi F5 lại nè rồi vào nè nhấn đăng nhập nè đó các bạn thấy bây giờ mình sẽ xóa đi cái session Token ha xóa đi cái S Token ở bên database của mình rồi mình enter lại nè chúng ta vẫn thấy nó gọi hai lần h rồi vẫn thấy nó gọi hai lần rồi Mình đã hiểu lý do rồi à Sở dĩ nó gọi hai lần là do bên cái function này nó gọi bên cái function này mỗi lần nó gọi cái fion này là nó tạo ra một cái giá trị cl lockout request này mới mọi người ạ n là chúng ta có thể đưa cái thằng này lên trên n à đưa cái thằng này lên trên đưa thằng này lên trên thì thằng này mình sẽ cho nó là cái kiểu dữ liệu gì cho nó khỏi lỗi nh mình sẽ cho nó là một là nun n hai là Promise Ok không Promise à mình Promise any đi Đấy là hết lỗi nha rồi F5 lại nè lưu nè mình nhắn đăng nhập nè Bây giờ mình sẽ qua bên này mình check này del record n OK nhá Rồi bên này F5 lại thì các bạn thấy nó chỉ gọi lockout một lần thôi đấy như này thì ổn hơn đúng không đấ gọi lockout một lần thôi Đang gọi lockout thì cái thằng lockout kia không có gọi nữa rồi Bây giờ thì chúng ta đã xử lý xong à Cái thằng à client component nó gọi đến server component rồi Rồi bây giờ mình sẽ cho nó quay về cái login như ban đầu nhá Rồi bây giờ thì chúng ta xử lý ở cái bên server compon đó server compon gọi đến api server mà bị hí hạn thì chúng ta cần phải xử lý cái đoạn logic đấy luôn Ừ server thì chúng ta có xử lý cái chỗ này nè đây đây này các bạn Nhớ nha Nhớ cái vòng If chứ còn không là bị Têu đấy rồi Nếu mà server thì làm thế nào ở đây ấ server thì chúng ta không có thể gọi cái api này mọi người được mọi người ạ Tại sao mình nói là server không thể gọi đến cái api out lockout thì cái thằng ipi out logout này ấ các bạn để ý ipi out logout là nó nằm trong cái n server Nếu như mà server của các bạn gọi đến ipi out logout thì gọi cũng được nhưng mà nó sẽ không xóa đi cái à Cookie đúng không server thì nó đâu có Lư Cookie đâu các bạn server làm gì có cookie này các bạn cứ tự tượng n từ server component n mà gọi đến cái thằng này các bạn tự tượng nha đừng có để ý cái dấu mũi tên này từ server component gọi đến cái thằng này mà nó bị hck hạ Token mà các bạn dùng cái Server component này các bạn gọi tiếp đến cái thằng server à row handle l ấ rồi cho dù các bạn gọi Thành công đi à các bạn Xóa cookie cookie nào nằm ở trên này chả có cái Cookie nào nó nằm ở trên này cả Cooky nè là nó nằm ở cái thằng next client đó nên là chỉ có cái thằng này các bạn mới gọi được đến cái thằng là ipi out LCK out để các bạn Xóa Cookie thôi các bạn hiểu ý mình không chiếc trên này các bạn gọi thành công thì nó cũng đâu có xóa Cooky của các bạn đâu nên là cần phải có một cái cách nào đấy để chúng ta gọi đến cái lockout gọi đến cái lockout khi mà cái thằng này nó bị hết hạn à Hết Hạn Thì mình mình đề xuất một cái ý ký thì đây là một cái à phương pháp của mình Thôi thì ngồi kia mình không biết có những cái phương pháp nào khác không nhưng mà đây là một cái phương pháp của mình thì ở đây à mình sẽ cho nó redirect sang một cái URL là logout có nghĩa là mình sẽ khai báo một cái page gọi là cái page logout như thế này mọi người thì khi mà nhảy vào cái page logout này thì nó sẽ logout Nhưng mà nếu như mà khai báo một cái page lockout này thì nó nguy hiểm quá Tại sao mình nói nguy hiểm Bởi vì nếu như mà có một cái người nào đấy Người ta gửi cho chúng ta cái URL là cái trang web của chúng ta xong rồi có một cái dấu xẹt logout như thế này nữa các bạn bảo người ta bảo mày nhắn vào cái URL này đi tôi nhắn vào cái nó log out cái web của tôi ra thì như thế là cái web của tôi nó nó có vẻ nó có lỗ hỏng đâu mặc nhào nó không có nghiêm trọng nhưng mà một cái bức nó không có đáng có nên là à mình đề xuất ấy là thay vì một cái xt lockout thông thường ấ thì mình sẽ có thêm một cái gọi là s Token này nữa mình sẽ có thêm một cái session Token này nữa ha Thì cái session Token này mình sẽ dựa vào cái thằng là session Token Mình lưu ở trong cái Cooky Á Mọi người đó mình sẽ dựa vào cái se Token Mình lưu vào trong Cookie ấ Nếu như mà cái session Token trên cái URL này nè nó mà nó bằng cái Cookie ấ nó mà nó bằng trong cái Cook kia thì mình mới cho nó lockout ra còn không thì không có cho đó thì khi mà cái thằng nào ngồi kia nó gửi cho mình cái URL thì nó làm gì Biết cái session Token nằm trong Cooky của mình là như thế nào mà nó gửi cái URL chính xác đúng không À như thế thì nó sẽ hạ chế được cái việc gọi là một cái thằng nào đấy một thằng erer nào đấy nó troll chúng ta nó làm cho web chúng ta logout đó thì ở đây đây là mình đang xử lý bên server nha Đây xử lý bên Server này các bạn để ý nha xem thì chúng ta cần phải xem cho kỹ rồi mình sẽ lấy cái S Token session Token mình sẽ lấy ở đâu thì khi mà server coment ấy nó gọi đến cái thằng server comm này nó gọi đến cái thằng server backend này thì nó cũng phải truyền cái authorization header lên đúng không Các bạn nhớ không truyền cái authorization header đây nè thì nó cũng phải truyền cái authorization header đây nó cũng phải truyền cái authorization header thì mình sẽ lấy cái session Token nằm trong cái authorization này thì ở đây con Token bằng option option ch header option ch header ch auto reation nè auto reation rồi gì nữa authorization này Nó là một cái chuỗi đúng không Thì mình sẽ split split một cái dấu cách nè đó rồi split ra được cái mãng thì mình sẽ lấy cái thằng cuối cùng rồi Chỗ này thì nó bị lỗi nó báo là cái authorization này n nó không có nằm trong cái header chỗ này snii cũng được đấy sni đi tạm thời mình cho snii cho nó nhanh nha bạn nào mà kỹ tính thì các bạn khai báo từng cái type Ừ chỗ này bạn nào kỹ tính thì có thể khai báo luôn cái PR này cắt một cái đây cái kỹ tính nha lấy đã được cái S Token rồi thì chúng ta sẽ cho nó redirect này re thì ở đây mình gọi cái function redirect cái function này là từ cái thằng next Navigation nha Thì hiện tại mình thấy cái function cái function redirect từ cái thằng n Navigation này đây mình coi trên này thì mình thấy là nó bảo là có thể chạy được ở server component đó có thể chạy được ở row handler và có thể chạy được ở server Action thì mình đang chạy ở một cái file mà cái file này chạy ở server thôi mình đang chạy ở một cái đoạn logic mà logic này chạy ở server thôi nên mình test coi thử là nó có gọi được hay không nha chứ mình không có chạy trực tiếp Cái thằng này ở server cent đó mình test coi thử nó có chạy được không nha À thì dù gì thì chúng ta cũng phải test đúng không như mình nói thì mình sẽ điều hướng nó sang một cái Trang logout hỏi chấm nè session Token đúng không session Token bằng rồi Ở đây mình sẽ đưa chỗ này mình sẽ dùng template string này tate string rồi mình sẽ đưa cái thằng session Token này vào Ừ lưu lại thì mình phải khai báo một cái page logout đó khai báo một cái page logout thì mình sẽ khai báo nằm trong cái thư mục out này logout nè đấy ptsx nha rồi Đây là một cái page lockout của mình trong này mình sẽ rfc ok khi mà nhảy đến cái page lockout này thì mình sẽ làm gì mình sẽ logout nó ra mình sẽ logout nó ra thì logout nó bằng cách là mình gọi đến đây logout nó ra nhảy đến cái page Shout thì mình sẽ gọi đến cái thằng là api lockout giống như bên này mình sẽ gọi đến api lock out giống như bên này đó api out logout để cho nó xóa đi thẳng Cookie mà muốn gọi được cái đấy thì cái trang page lockout này nó phải là client của Bình có nghĩa là nó phải được gọi ở client đúng không như mình nói đấy Chỉ có thằng client thì chúng ta mới gọi đến cái thằng này thôi đấy như mình đã phân tích rồi thì chúng ta phải chuyển này thành use client đó thành client component lock out ok chưa đấy rồi bây giờ gọi api thì chúng ta gọi xong use effect đúng không nào nhảy đến cái trang này à chúng ta sẽ xử lý cái điều gì đầu tiên thì chúng ta cũng phải check coi thử là nó có cái session Token n trong cái URL hay không đúng không Mình sẽ khai báo một số cái ví dụ như router n bng use router Navigation nè rồi tiếp tục constant path name bng use pth name đây mình sẽ lấy một số cái Hook thì mấy cái Hook này dùng ở client thôi nha mọi người con search à param search param bằng ui thằng này thì nó gợi ý không hay lắm you par ok thì mình sẽ lấy cái S Token ra constant s session Token bằng cái search param này mình sẽ get cái session Token trên cái URL ấy mọi người rồi lấy cái session Token mình sẽ C lock cái session Token ở trong này nhá lưu lại đây là cái page lockout của mình đấy Bây giờ thì mình sẽ test cái trường hợp mà nó nhảy sang cái pay lockout như thế nào thì để test cái trường hợp đấy thì chúng ta test nó nằm ở trên cái server á gọi ở server coment ấy thì ở đây cái pay me profile của mình n thì cái thằng này mình gọi ở server component thì mình tắt đi cái client component đi đó để mình test nằm ở trên server coi thử có được cái gì không Bây giờ mình sẽ sẽ nhấn đăng nhập Ok Bây giờ mình chỉnh sửa cái session Token này đi đó mình sẽ thêm 1 23 vô thì tất nhiên session Token của mình nó đã bị lỗi Bây giờ mình sẽ F5 lại cái payme này Wow mọi người thấy đã nhảy sang cái pay lockout rồi nè ừ nhảy sang cái p lockout có nghĩa là cái redate của mình nó thành công nó nhảy sang cái pay logout và chúng ta coi A nó cũng đã lock ra được rồi lock ra được cái session Token rồi ok lock ra được rồi thì chúng ta làm gì nữa à chúng ta sẽ check check coi thử là nếu nếu mà cái session Token này ấ nó mà bằng cái client session Token ch value của mình đó nếu mà nó bằng thì mình sẽ gọi đến cái thằng ipi logout II out ipi request này mình sẽ gọi đến log out log out from next cl to next server nhưng mà cái chỗ này chúng ta cần phải thêm một tí xíu ở đây Đấy thêm một tí xíu chỗ này mình sẽ thêm một cái giá trị force mình đang force lockout mà đúng không force ở đây mình nó sẽ mình sẽ cho nó là bulling này hoặc là undefine thì truyền cái force vào đây ok chưa Lưu lại qua bên này tất nhiên mình phải điền cái giá trị là false vào giá trị là true nh nhầm nhầm nhầm tí rồi đến cái tên bạn nào mà dùng signal way thì cứ dùng ở đây mình dùng Promise thôi cũng được khi mà thành công thì mình làm cái gì nữa Khi mà thành công thì cho ông này quay về cái p loging đấy router ch Push gạt login rồi chuẩn chưa À truyền vào một số ong Ví dụ như trong này dùng router thì truyền router vào Ok còn b name này chưa thấy dùng gì cả ví dụ như bạn nào ấy mà kiểu cầu toàn hơn ấy thì bạn có thể làm như mình thay vì đến login Thông thường thì các bạn thêm một cái param nữa thêm một cái param nữa thêm một cái param gọi là redirect này à from reate from xong rồi các bạn sẽ làm như thế này các bạn sẽ đưa cái p name này vào à Sorry đưa cái p name vào đó các bạn đưa cái p name này vào ha thì khi mà các bạn đưa cái p name này vào rồi ấ thì khi mà qua bên pay locking ấ các bạn check coi thử là nó có cái redirect from hay không Nếu như mà có redirect from ấ thì các bạn cho nó hiển thị lên một cái thông báo đi gọi là à đã buộc Đăng xất Thành Công A các bạn hiểu ý mình không còn không có redirect thành nếu mà nó không có cái param này thì không có cái thông báo đấy Thì đó như vậy thì nó sẽ tăng cái trải nghiệm người dùng lên đúng không nào rồi Bây giờ thì mình test coi thử nè F5 lại nè Đó nhảy sang C2 login liền qua bên application thì các bạn thấy đấy không còn cái session Token nữa nó đã gọi lockout rồi đấy và các bạn qua bên này thì các bạn sẽ thấy này có được cái api lockout gọi api lockout liền các bạn Thấy ok chưa Ừ ở đây đây thì các bạn thấy rằng Gọi ipi lockout gọi tặng gọi Tặng hai lần à Gọi Tặng hai lần cơ thôi kệ n đôi đôi khi mấy cái này chúng ta có thể chấp nhận nó cũng được ha chấp nhận nó cũng được không sao cả bởi vì tại sao nó gọi Tặng hai lần mọi người biết không Mình ở đây mình nghĩ là có thể có thể Cái thằng này nó chạy hai lần này Cái thằng này nó chạy hai lần Mà cái thằng nó chạy hai lần nhưng mà cái chỗ này nó chạy nhanh quá cái chỗ này nó chạy nhanh quá mọi người ạ nó chạy nhanh quá nên là đến cái thằng thứ hai ấ là nó vẫn nhảy vô cái logic này luôn à đến cái thằng thứ hai nó vẫn nhảy vô ô đúng không Khi mà ở quay quay xong cái thằng này rồi thì client lockout request setting nó lại bằng nun đã chứ Đúng không nào phải setting nó lại bằng nun chỗ này đã rồi nhưng mà cái logic này thì nó cũng không ảnh hưởng đến cái thằng gọi hai lần đâu mọi người do mình nói đấy Nó gọi nhanh quá thì đôi khi nó gọi hai lần thì các bạn có thể delay cái chỗ đấy cũng được nhưng mà các bạn có thể thêm cái chỗ này này các bạn sửa nó delay nó thêm một tí xíu đây này các bạn có thể delay cái thằng này delay cái thằng set n này thêm một tí xíu cũng được mà thôi không cần đôi khi chúng ta cũng chấp nhận một tí xíu đấy Không sao mọi người ạ Không sao đấy Không sao cả application này rồi mình enter lại đó nó xóa ngay cái session Token của mình đi ok không đấy Qua bên này thì các bạn thấy kể kể nó đi nó có log out hai lần kể Nó đi rồi Miễn sao là mình thấy nó ổn là được Đấy mình nói đấy các bạn thêm delay chỗ này một tí là nó gọi bình thường mà ví dụ như mình thêm delay này constant delay nó gọi một lần thôi các bạn có thể khai báo constant gọi là Promise delay bằng Đây đây là một cái Promise delay nha xuống phía dưới này n đấy delay một tí rồi mới set nun Ví dụ như Promise delay delay 1 giây đi a quay ông thằng này delay 1 giây thì các bạn sẽ không thấy cái trường hợp đấy nữa đôi khi không edit được như th này ta rồi em Nằm lại nè đây Các bạn thấy nó lockout hơi chậm một tí đúng không Nhưng mà bên này nó chỉ ớ nó vẫn gọi hai lần Hả Ây da vẫn gọi hai lầng chỗ này căng rồi [âm nhạc] nha vẫn gọi hai lần chỗ này à Để mình check một tí xíu ha mọi người có vẻ mình đang bị bức ở chỗ nào rồi à Mình hiểu rồi mọi người ạ hiểu rồi mình bị check logic nhằm chỗ này chỗ này cũng được nhưng mà đáng lẽ chúng ta phải check cái chỗ này nè nó gọi là nó gọi đến cái function này nó nó nó không có đi qua cái logic này nó không đi qua cái logic này mọi người ạ bởi vì nó đâu có cái status là 401 ở client đâu cái status 401 này là nó nằm ở server thì nó nằm ở chỗ này thôi Nó nằm ở chỗ này thôi Nên là ừ nên là chỗ này nó gọi hai lần [âm nhạc] này Chỗ này nó gọi hai lần chúng ta có thể check làm sao cho chỗ này nó gọi một lần thôi cũng được gọi hai lần thì không đáng lắm ha Ừ rồi Để mình check lại một tí xíu chỗ này đâ các bạn có thể xem chỗ này nó gọi hai lần này mình sẽ C lock rồi application này s Token n edit value n 12 2 3 n là các bạn sẽ thấy đây Ông này ông gọi hai lần gọi hai lần nên là Ừ chỗ này thì chúng ta xử lý cho nó gọi một lần thôi khi mà chúng ta gọi một cái api ở đây ấy thì chúng ta sẽ sử dụng apport controller để chúng ta hủy nó gọi api nhá Hủy gọi api đây controller Face api rồi rồi Để mình xem lại cách sử dụng apport controller một tí xíu nha rồi mình sẽ khai báo một cái controller ở đây này controller rồi thì chúng ta sẽ constant signal bằng controller ch signal Ok chúng ta truyền cái signal vào trong cái option f nh mọi người truyền cái signal vào đây ở đây chúng ta có thể truyền signal vào Ừ đy là option f signal này nó có kiểu gì signal này apport signal nè thì có cũng được không có cũng được ha undefine Thì bên này mình sẽ truyền cái signal vào đấy signal này signal vào à để mà hủy thì chúng chúng ta sẽ sử dụng là controller chort thì nó sẽ hủy nha thì chúng ta sẽ hủy ở đâu Hủy ở đây này Return này Ừ cleanup function nè controller chort đó rồi Để mình test cái trường hợp này thử ha test cái trường hợp này login n đăng nhập này Xóa đi Xóa hết mấy cái session Token này đi đấy xóa hết rồi bây giờ mình F5 lại đó các bạn thấy không Bây giờ nó chỉ gọi một lần thôi nó gọi lần đầu tiên cái lần thứ hai nó gọi tiếp thì nó sẽ cancel cái lần đầu đó chúng ta dùng cái apport controller chỗ này là hợp lý luôn r các bạn thấy nó đã cancel rồi này request nó đã cancel đấy ổn không Đấy rất là tốt nha Thì nếu mà như thế thì bên này mình sẽ tắt đi cái Promise delay này đi không cần thiết nữa rồi Rồi sẵn tiện ở đây mình làm một tí xíu nữa đó là hiện tại cái thằng session Token của mình ấy Mình lưu ở đây mình chưa lưu cái giá trị gọi là ngày hết hạng cho nó nằm trong cái Cooky này này mình đang để mặc định là nó sẽ ghi là cái session như thế này thì không hay lắm mọi người ạ Mình cần phải đưa cho nó một cái giá trị hết hạn một cái giá trị hết hạn ví dụ như ngày tháng năm nó hết hạn ấy bởi vì khi mà nó hích Hạn Thì cái này nó sẽ auto xóa đi nó sẽ hay hơn thì các bạn muốn mà biết được cái thời gian hết hạn của session Token của các bạn ấy thì các bạn cần phải hỏi bên backend của các bạn nha cần phải hỏi cái bên mà cung cấp session Token ấy thì một ấy là ông cung cấp cho tôi cái à thời gian hết hạn của cái session Token để tôi lưu vào trong cái Cooky của tôi đấy hai ấ ông không cung cấp cái thời gian hết hạn cho tôi cũng được nhưng mà Ông phải nói V tôi biết là cái format Token của ông là định dạng như thế nào có thể lấy ra được cái pay loog hay không Ví dụ như cái format của mình ấy đây cái format session Token này Nó là một cái Jason Quest Token mà Jason Quest Token thì chúng ta có thể lấy ra được payot mà không cần Secret key a các bạn hiểu không lấy được pay log mà không cần secy nha thì chúng ta có thể xử lý cái chỗ đấy nằm trong cái ipi loging ấ khi mà chúng ta login này đó login thì chúng ta gọi đến cái ông out out này đúng không nhớ không IP này out request gọi đến ông out IP out này IP out thì gọi đến cái thằng r handler out này nè Nhớ không nhớ không đó gọi đến thằng này thì thằng này nó có set Cooky rồi nè Thì thằng này set Cookie thì set thêm vài cái giá trị vô cho nó nữa là được chứ gì thì ở đây ừ ừ cái format của mình đấy là Jason We Token nên là mình sẽ cài một cái lấy package là Jason web Token vào Jason web Token mình sẽ cài cái package này vào để lấy ra được cái pay loog nhé Đây package này nè package này thì các bạn chạy ở trình duyệt hay là chạy ở Ờ nots vẫn được CD vào cho đúng thằng folder client này rồi mpm Jason web Token thằng này thì các bạn thấy cái chữ DT này DT thì các bạn phải cài thêm cái packet typ của nó nữa nhá Đây cài thêm cái packet type Nếu như mà các bạn dùng typescript như mình rồi Ừ đây Bây giờ mình sẽ khai báo một cái type các bạn có thể copy cái se Token của mình lên trên cái ong gọi là decode này các bạn xem cái thông tin của nó ừ các bạn pass cái session Token của mình vào đây nhá thì đây Đây là cái p log của mình này các bạn thấy không p log của mình nó cũng ít thôi mọi người nó cũng có vài cái ví dụ như là Token type này à user ID này Cái thời điểm khởi tạo và cái thời điểm hết hạn đây cái thời điểm hết hạn này chúng ta hover vào thì chúng ta sẽ thấy là nó hết hạn vào năm 2025 thì mình đang set hết hạn là 1 năm sau nó mới hết hạng nhé 365 ngày ấ 365 ngày mới hết hạng Đây là cái thời điểm khởi tạo này đó rồi bây giờ thì sẽ khai báo cái pil loog này type p loog json web Token n bằng iat nè mình sẽ cho nó là number đúng không À nó còn có cái exb nữa exb là cái thời điểm H hạng và cái Token type Token type mình cho nó là string này và user ID mà user ID nó là number đúng không khai báo như thế nào thì phải coi nhá coi nó có thử có đúng hay không và các bạn để ý các bạn thấy cái này number thì number này Tại sao lại đổi ra được cái thời gian như thế này thì cái number này là nó xé theo kiểu gọi là airport time là nó tính từ mình nhớ là nó tính từ năm 1970 thì phải đây là các bạn xem này Air time airport time đây này Nó tính từ ngày 01 tháng 0 năm 1970 mọi người ạ là nó đếm cái số dây đếm số dây thì đếm bây giờ thì đã chừng chừng này dây rồi thì muốn đổi ra được cái kiểu ngày giờ hiện tại thì các bạn chỉ cần nhăn với 1000 xong rồi new day là được Ừ và để mà set cho đúng cái Cooky ấ thì chúng ta sẽ exet thông qua một cái giá trị gọi là ex này Đây expire này nó nhận vào là đây nha Thì cái kiểu đâ này đây này exp expire day chúng ta sẽ set như thế này nè để mình sẽ lấy import à decode từ từ import from Hay là mình khai báo thêm một cái function bên cái un này đi ha mình sẽ khai báo bên cái in này gọi là decode Jon We Token đi constant export constant này constant decode GT bằng mình sẽ nhận vào Token ở đây mình sẽ dùng generate type luôn payot của mình là mặc định mình sẽ cho là any n Token là string này mình sẽ Return này jwt jwt thì import jwt from json web Token n đó xuống phía dưới này jwt CH decode này đó Các bạn truyền cái Token của các bạn vào S log là được Ok mình sẽ gọi cái decode jwt e rồi xóa cái này đi gọi ở thằng này khi mà lấy được cái se Token rồi thì mình sẽ decode nó ra à constant n pilot này bằng decode jwt à mình sẽ truyền cái thằng pilot jwt chỗ này ha À đây mình đang nói là generic type thì khi mà mình truyền như thế này thì cái payot của mình nó sẽ có kiểu là jwt các bạn thấy không Rồi chuyển cái S Token vào lấy ra được cái p loog rồi ấ thì chúng ta sẽ thiết kế cái expire chỗ này rồi Chỗ này ma I thì mình mình sẽ dùng cái expire nhá constant expire expire thì exp day exp Day của mình ấy New New Day như thế này xong rồi mình sẽ chấm to utc string nha các bạn phải chuyển thành utc to utc Nhớ nha utc string phải chuyển thành utc nha Tại sao mình biết là chuyển thành utc thì các bạn search này expire này nó có kiểu là đây đúng không search lại một tí thì đây C day for require formatting này các bạn Click vào đây thì nó sẽ nhảy qua cái trang này thì nó bảo là à chuyển thành to UC utc string là được đấy thì mình sẽ chuyển thành như thế này sttp only rồi nè s Price bằng rồi bằng cái giá trị này ngoài ra thì chúng ta có thể X Thêm một số cái thuộc tính vào trong cái Cooky cho nó an toàn hơn Ví dụ như cái x s size s size bằng bằng gì bằng LX đi xem X bằng L và thêm cái sq này vào đó rồi bây giờ chúng ta coi thử nha coi thử đăng nhập thì nó đã có được mấy cái đấy chưa đăng xất đi rồi thì bây giờ các bạn xem nhé se Token của mình này Đây bây giờ nó đã có được cái giá trị expire này các bạn thấy nó hết hạng vào 2025 ấ đó nó cũng có được một số cái thuộc tính như skill này và cái S SI là l này thì về những cái thuộc tính này chi tiết như thế nào thì chắc bài này mình Mình không giả thích cho các bạn các bạn search Google mấy cái thuộc tính này nhá Bởi vì giải thích nó rất là dài cái video này nó cũng 50 phút rồi video 50 phút rồi giả thích chi tiết thì hơi bị dài nên là các bạn search Google về mấy cái thuộc tính này ha rồi thì trong cái video này mình đã hướng dẫn mọi người làm cái thằng là khi mà Token của mình nó hết hạn thì mình cần phải xử lý như thế nào đúng không Thì mình đã xử lý được ở cái thằng next client nó hết hạn và next server nó hết hạn rồi đó Ngoài ra thì còn có một cái trường hợp nữa trường hợp là trường hợp gì là cái trường hợp này nó cũng không có phổ biến đâu nhưng mà mình cũng nói luôn đó là cái trường hợp là khi mà các bạn gọi các bạn dùng cái thằng n Server này dùng server này có nghĩa là các bạn dùng cái thằng row handler ấ làm một cái proceed proced có nghĩa là một cái api request trung gian Ví dụ như mình đang nói ở đây là cái thằng row handler login ấ cái row handler loging hay là cái gì đấy ví dụ như gọi là proced thì để ví dụ như cái này cũng gọi là proced đi Chẳng hạn cái này Ví dụ như cái lockout này thì cũng gọi là proced được không Để mình coi thử nha Đây cái lockout này thì cũng giống như là một cái proced ấ có nghĩa là thay vì chúng ta lockout trực tiếp từ từ Cái ông này gọi đến cái ông này thì chúng ta phải thông qua cái ông này đ gọi ông này lockout thì ông này gọi đến ông này xong rồi trả về Ông này ông này trả về ông này đó thì ông này đứng vai trò là trung gian thì người ta gọi là proceed các bạn hiểu không thì sẽ có một số cái trường hợp Ví dụ như các bạn gọi thông qua cái thằng này ví dụ các bạn gọi cái xt mi đi à account me ấ các bạn gọi đến thằng này xong rồi Thằng này gọi đến thằng này lấy thông tin v account Me trả về cho thằng này thằng này trả về cho thằng này đó mà ví dụ như trong cái quá trình mà gọi thì cái row handler ấy cái row handler là nằm trong cái logic này nè Cái roll hand nằm trong cái logic này này chẳng hạn nó bị hết hạng Token nó bị hết hạng Token thì những cái lúc đấy thì các bạn cứ trả về cho cái thằng à hích hạn như thế nào thì các bạn cứ cứ throw về cho cái thằng client thôi đây Ừ ví dụ như khách hạn như thế nào thì các bạn nhớ catch Cái lỗi Ví dụ như chỗ này mình đang cas một vài cái lỗi Như http eror À đây mình đang thow như thế này này thow như thế này là cũng là chuẩn rồi đấy mọi người đấy ví dụ như bên bên Server backend này nó trả về lỗi 401 cho cái thằng row handler đúng không trả về lỗi 401 cho row handler thì nó sẽ nhảy vào trong cái thằng này nó sẽ nhảy vô trong thằng này thằng này nó sẽ trả về cái status là 401 cho cái thằng à next clent và next clent nó nhận được 401 thì 401 chúng ta đã xử lý rồi đúng không Chúng ta đã xử lý 401 ở n cl rồi nên là cái những cái trường hợp đấy thì chúng ta không cần xử lý nữa ha Đó ok rồi chúng ta chỉ cần xử lý cái chỗ gọi là logic thow lỗi làm thế nào cho nó đúng nó chuẩn như thế này là được rồi coi lại một tí xíu trong cái video này thì chúng ta đã làm những gì rồi thì mình sẽ review lại một tí xíu ha chắc tầm 2 phút của mọi người thôi thì mình cũng đã cài đầu tiên là package Jon thì mình cài hai cái package là J W Token và cái kiểu typ của Jon Token dành cho những cái bạn sử dụng typescript cái face out f out này thì mình sửa lại là mình truyền vào hai cái tham số ha là cái force nè Cái force là app lockout dù cho có Cooky hay không nữa Dù cho có session Token hay không thì vẫn lock out đó thì đây là cái force và mình truyền một cái signal signal này là để hủy hủy gọi api nhá Hủy gọi api rồi locking form à locking form thì locking form à locking form thì mình chỉ là mình xóa đi cái to này thôi không có thay đổi gì rồi đến cái thằng page page này là page logout là mình vừa tạo một cái pay logout dùng để từ server component mình redirect sang cái pay logout này thì p logout này là dùng us cl nha dùng us cl thì mình gọi đến cái thằng là logout from next cl to next server và mình truyền là force logout này truyền cái signal vào này để những cái trường hợp mà nó duplicate nó gọi hai lần thì cái lần đầu tiên nó sẽ bị hủy đó gọi logout thành công thì redirect về trang loging ok chuyển sang một cái row handler đây là row handler bên out out này là dùng để set cái session Token vào trong cái wooky ấ thì mình đã dùng cái thằng là Jason web Token để mình decode cái session Cookie à session Token của mình mình mình de code nó rồi thì mình biết được cái giá trị hết hạn nè đó biết được cái giá trị hết hạn này và mình thêm vào trong cái Cooky đó rồi đến cái thằng rad à r này là gì R này là ừ logout à ipi lockout Thì ipi logout mình sửa lại một tí xíu là mình thêm vào cái giá trị force Nếu như mà bắt buộc phải logout thì phải logout nó thôi không cần check Cookie gì cả bắt buộc lockout là logout luôn đấy Xóa Cookie thế rồi đến cái thằng thằng profile mi này thì thằng này cũng không có gì nhiều Đây là hai cái để mình test cho mọi người thôi rồi sttp đ cái sttp clent của mình mình import cái Red như mình nói đấy Cái redx này mình vẫn dùng được ở cái file này nhưng mà các bạn nhớ dùng trong môi trường server nhá Đấy chỗ này client lockout request rồi cứ để đó đi cũng được Các bạn nhớ dùng ở cái môi trường server nha đây Môi trường server là cái môi trường này nè Ừ đây thì ở đây Đây là cái cái đoạn logic này là cái đoạn logic nó chạy ở cái thằng clan thì chỗ này nhớ dùng server nhá chứ Dùng Lan là nó bỏ lỗi đấy Đó là cái lý do mình mình hay nói với các bạn về cái phần này đó Mình tách biệt ra chứ mà dùng lung tung lung tung là lỗi lỗi toan hết lên không biết fix như thế nào đâu rồi ok chưa đấy Chỗ này thì lấy cái session Token mà lấy ra từ cái authorization đấy đấy lúc nào cái thằng server com nó chả truyền lên cái authorization p Token thì lấy ra được lấy ra được thì redirect đến cái pay lockout đúng không pay logout là client coment thì chúng ta log out từ client thôi rồi bên này thì until thì mình import cái ch We Token vào để mình khe báo một cái until l decode thôi rồi Thế thôi hết rồi Còn cái này thì cái DB của mình nãy giờ nó thay đổi thì nó bị change như vậy rồi thì đó là những gì mà mình muốn chia sẻ với mọi người trong cái video ngày hôm nay à về cái author reation này authentication này nó còn vài cái video nữa mọi người ạ Nó hơi dài bởi vì theo mình thấy cái thằng này là cái thằng khó nhất khi mà các bạn làm việc với ncs rồi nên là mình dự kiến Chắc còn một hai cái video về authentication này nữa thì mình sẽ vào làm đến mấy cái như là thêm sự xóa rồi sale đấy rồi chào mọi người nhá