NextJS: 03-09 Cài đặt Protected Pages chỉ được truy cập khi đã đăng nhập
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- Khi dự án có một số trang yêu cầu đăng nhập thì mới xem được nội dung, mình sẽ setup như thế nào? 🤔
- Sử dụng useAuth hook
- Tạo component để quản lý việc render tuỳ vào logged in user
Slide: drive.google.c...
---
#nextjs
#protected_pages
#nextjs_tutorial
---
VIDEO CHAPTERS:
Made by: Sinh Bùi Đình
Cảm ơn bạn nhiều nhé! ❤️
00:14 Introduce install component AUTH for (Protected Pages)
00:40 Explain setting page per page
01:40 Explain setting by Layout
02:15 Setting common component AUTH
05:55 Idea check first loading in hook
07:10 Handle protect page when loading done
09:00 Flow check page about working with protect page
12:10 Handle act when login success for see full thread protect page
13:10 Apply Logout in layout have protect page
14:50 Good point of SWR
15:40 Issue when try to access protect page by router.push
16:15 Different between access protect page by router.push from login after logout instead go direct
17:20 Test all thread
17:50 Test case apply mutate = null instead of {} when logout
18:35 Test case apply mutate = undefined instead of {} when logout
19:55 How to apply protect page
---
Easy Frontend - Code xịn hơn mỗi ngày
🔥 Khoá học Javascript: course.ezfront...
🎁 Khoá học ReactJS: course.ezfront...
🎯 Fan cứng Easy Frontend: / @easyfrontend
---
💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
---
Kết nối với mình:
- ✅ Follow facebook: / nvhauesmn
- 🎉 Fan page: / learn.easyfrontend
- ❓ Group: / easyfrontend
- 💻 Github: github.com/pau...
- 💼 LinkedIn: / haunguyenmn
anh ơi cho e hỏi mình có nhiều role nhiều acc thì mình làm sao có thể get `profile` được ạ ? e muốn truyền cái user_id khi mình login vào get `profile` mà k biết làm cách nào
hi em, cái đó em ko được phép làm vậy nha
thông tin user là private, chỉ người đó mới xem được
nên phía backend họ sẽ dựa vào token của em để biết user_id và từ đó trả về thông tin, chứ ko có vụ em truyền userId và trả về thông tin nhen.
Trừ khi em đang làm dashboard admin hen, lúc đó sẽ dùng một API khác
Hóng series này của anh hàng ngày
yeahhh cảm ơn em nhiều nhiều nhen, cái này tốn time soạn tài liệu quá, nên ra hơi lâu hihi, em thông cảm nhen 😊
00:14 Introduce install component AUTH for (Protected Pages)
00:40 Explain setting page per page
01:40 Explain setting by Layout
02:15 Setting common component AUTH
05:55 Idea check first loading in hook
07:10 Handle protect page when loading done
09:00 Flow check page about working with protect page
12:10 Handle act when login success for see full thread protect page
13:10 Apply Logout in layout have protect page
14:50 Good point of SWR
15:40 Issue when try to access protect page by router.push
16:15 Different between access protect page by router.push from login after logout instead go direct
17:20 Test all thread
17:50 Test case apply mutate = null instead of {} when logout
18:35 Test case apply mutate = undefined instead of {} when logout
19:55 How to apply protect page
nextjs ko có kiểu khai báo useRoutes như react hả anh, mỗi page phải vào từng component page và bọc lại bằng component Layout tương ứng với mỗi page hả anh
yeah nó ko có kiểu định nghĩa routes như bên reactjs em nhen hihi
anh cho em hỏi cái TH mà token hết hạn trong khi trước đó mình đã login rồi thì làm thế nào để đẩy ra ngoài trang login ạ
Anh ơi đoạn 5:38 cái em làm giống anh nhưng cái profile?.username của em nó cứ bảo "Object is of type 'unknown'." thì phải làm sao hả anh?
hmm, bên anh thì ko có bị, hk biết em có miss gì hk ta?
Mình làm cũng bị vậy
bạn viết bằng ts thì phải khai báo kiểu trả về là any thì hết lỗi á =))
@@NguyenMinh-nr8iv trời ý mình hỏi là ngoài kiểu any thì fix bằng cách nào khác ấy =))
@@VuongNguyen-ix3sm thì thay vì any bạn khai báo kiểu mới rồi trả về cho nó kiểu bạn muốn thôi
anh Hậu ơi cho em hỏi ở ( 18:53 ) mình đã mutate(undefined,false) thì profile là undefined rồi mà sao ở ( 18:45 ) mình lại còn cái profile nữa?. Em có thử test thì thấy nó vẫn work như mutate(null,false) nhưng có khác là firstLoading là true thoi màa
hi Thông, cái này anh nghĩ do cơ chế của mutate nó hoạt động thôi em hen
nó xem undefined là giá trị đb, và ko update gì hết, giữ nguyên giá trị hiện tại
còn muốn reset thì phải dùng null
Giờ em test lại thấy chạy đc, có thể nó để fix lỗi này á Thông 😉
anh Hậu cho e hỏi cái protect này anh làm test thôi chứ hầu như người ta kiểm tra dựa vào cookie đúng không a?
hi Sang, cái này nó cũng tùy vào:
- việc em xử lý bên server hay client
- dùng jwt hay cookies
thì mình sẽ xử lý tương ứng, tại mỗi project mỗi khác em nhen.
Nếu là xử lý phía server thì mình sẽ check dựa trên cookies/jwt gửi lên từ client.
Còn xử lý phía client thì đơn giản check local storage em nhen, hoặc em có thể check cookie phụ, kiểu cookie token thì em ko lấy đc òi, nhưng sẽ có thêm cookie phụ nói là đã login chẳng hạn, em có thể dùng nó để check phía client 😉
@@EasyFrontend dạ tại e đang thắc mắc nếu làm như của a mỗi lần vô 1 page nó đều call lên serve để check đúng ko a
@@sangnguyenngoc1744 à nó check lần đầu thôi em nhen, xong cache 1 tiếng, sau đó nó mới đi gọi lại lên server check nha em, em coi chỗ useAuth nha
anh ơi cho em hỏi giờ em làm protected page nên dùng cách này hay dùng _middleware ạ ?
hi em, anh thì hay dùng cách này, còn middleware thì anh chưa làm, nên hk rõ là sẽ làm ntn em nhen.
Em chào anh, có cách nào khi chưa login, click vào button go to about thì để nó không re-render lại không ạ
hi Đức, anh chưa rõ câu hỏi của em lắm, em cho anh hỏi thêm cụ thể là mình mong muốn làm đc việc gì vậy em hen ?
anh Hậu ơi cho em hỏi case đã login, nhưng sửa url browser thành /login thì phải đá về / hoặc /dashboard. case này xử lý như thế nào vậy anh
hi Linh, cái này em có thể cái useEffect ở login page, rồi em check điều kiện, nếu đã login thì redirect qua trang dashboard em nha 😉
Chỗ cài đặt Proteced Pages này mình dùng access_token đã set trong cookies thay vì check username trong profile được không anh?
Em không biết 2 cách này nó có điểm lợi như nào? Và em nghĩ mình sẽ dùng tuỳ trong hoàn cảnh và project. Mong anh có thể giải thích giúp em, nếu được thì cho em trường hợp khi nào dùng cách nào luôn ạ hihi. Em cảm ơn
à trong cookies mình đã set http-only thì ko thể truy cập thì phía client được, nên em ko thể dựa vào đó mà check em nha. Nên đơn giản mình dùng một flag nào đó trong local storage / hoặc username như hiện tại là okie òi em nhen 😉
@@EasyFrontend dạ cảm ơn anh Hậu em hiểu rồi ạ
@@EasyFrontend mình có thể check ở server rediect trước mà ko cần phải loading không a
không có trong bài nhưng a Hậu cho e hỏi là sao e dùng biến trong .env.local ở các file trong API của next js toàn bị báo undefined vậy ạ. làm sao để truy cập vào .env.local ở api ạ anh. bên ngoài thì e vẫn sử dụng được bình thường ạ
à sr em, mấy bữa nay bận lo đám cưới.
phần biến môi trường, em để ý là nó dùng bên trình duyệt hay server nha.
nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
em đọc link này, nếu biến môi trường dành cho browser thì phải có prefix là NEXT_PUBLIC_ nha
em đang theo series này mà giờ ra next 13 thì nên dùng 13 hay dùng lại next 12 ạ anh
em có thể dùng next 13 cũng đc nha, mấy cái features của 12 nó vẫn hoạt động đc bình thường hehe
@@EasyFrontend Dạ cám ơn anh Hậu ^^
tuần này có video k hả anh :)
à tuần này sẽ có videos em nhen, anh định hướng đc nội dung cho mấy chương tiếp theo òi, giờ code thử, xong là quay videos thôi em hehe 😊
@@EasyFrontend háo hức quá ạ 😊
Anh ơi mình custom nếu server trả về Unauthorized thì rediec ra trang login được k a.
hi Hiếu, hình như trong video có làm cái đó đúng hk em?
@@EasyFrontend dạ không ý em là lúc call api mà api trả về Unauthorized thì mình rediec lúc đó luôn á a
sao a ko dùng _middleware của nextjs ạ
hi Minh, anh làm video này trước khi có _middleware em nhen, với hiện tại nó mới beta nên đợi nó stable tí rồi hẳn dùng em nhé 😉
@@EasyFrontend Chào Anh Hậu, anh có thể hướng dẫn thêm nguồn tài liệu về middleware trong nextjs không ạ, em đọc tài liệu trang web nextjs mà chưa bik sử dụng middleware như thế nào :((