NextJS: 03-09 Cài đặt Protected Pages chỉ được truy cập khi đã đăng nhập

[@truyentranhvn1020]

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

[@EasyFrontend]

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

[@MinhHoang-ih3wt]

Hóng series này của anh hàng ngày

[@EasyFrontend]

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 😊

[@VuongNguyen-ix3sm]

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?

[@EasyFrontend]

hmm, bên anh thì ko có bị, hk biết em có miss gì hk ta?

[@ngantang3775]

Mình làm cũng bị vậy

[@NguyenMinh-nr8iv]

bạn viết bằng ts thì phải khai báo kiểu trả về là any thì hết lỗi á =))

[@VuongNguyen-ix3sm]

@@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 =))

[@NguyenMinh-nr8iv]

@@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

[@Borz-v3e]

anh ơi cho em hỏi giờ em làm protected page nên dùng cách này hay dùng _middleware ạ ?

[@EasyFrontend]

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.

[@sinhbuiinh2248]

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

[@NguyenLinh-cg6zm]

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

[@EasyFrontend]

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 😉

[@nguyentronghieu2366]

Anh ơi mình custom nếu server trả về Unauthorized thì rediec ra trang login được k a.

[@EasyFrontend]

hi Hiếu, hình như trong video có làm cái đó đúng hk em?

[@nguyentronghieu2366]

@@EasyFrontend dạ không ý em là lúc call api mà api trả về Unauthorized thì mình rediec lúc đó luôn á a

[@vitdo6049]

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 ạ

[@NguyenMinh-nr8iv]

sao a ko dùng _middleware của nextjs ạ

[@EasyFrontend]

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é 😉

[@lthrworld]

@@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 :((

[@bonpham2103]

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

[@EasyFrontend]

yeah nó ko có kiểu định nghĩa routes như bên reactjs em nhen hihi

[@hunghuy2156]

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 ạ

[@EasyFrontend]

à sr em, mấy bữa nay bận lo đám cưới.

[@EasyFrontend]

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

[@thongduong2200]

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

[@EasyFrontend]

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 😉

[@enderws05]

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

[@EasyFrontend]

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

[@enderws05]

@@EasyFrontend Dạ cám ơn anh Hậu ^^

[@sangnguyenngoc1744]

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?

[@EasyFrontend]

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 😉

[@sangnguyenngoc1744]

@@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

[@EasyFrontend]

@@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

[@TaiNguyen-pc6vk]

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

[@EasyFrontend]

à 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 😉

[@TaiNguyen-pc6vk]

@@EasyFrontend dạ cảm ơn anh Hậu em hiểu rồi ạ

[@NguyenMinh-nr8iv]

@@EasyFrontend mình có thể check ở server rediect trước mà ko cần phải loading không a

[@nguyentinh4127]

tuần này có video k hả anh :)

[@EasyFrontend]

à 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 😊

[@nguyentinh4127]

@@EasyFrontend háo hức quá ạ 😊

[@duchoangtrung7151]

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 ạ

[@EasyFrontend]

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 ?