Có cách nào để phân loại user đã đăng nhập và chưa đăng nhập trên trang 404 trong next.js không?

50 lượt xem

profile picture

Ẩn danh

Ngày 12 tháng 06 năm 2023

Chào mọi người, mình đang làm dự án bằng next.js. Trong các yêu cầu của dự án thì có yêu cầu phải hiển thị trang 404 khác nhau cho 2 trường hợp user đã đăng nhập và user chưa đăng nhập. Mà theo mình biết thì trên next.js thì trang 404 được build là trang tĩnh và sau khi build thì không thể truy cập vào cookie hay các giá trị khác của nó. Vậy không biết có cách nào để làm được theo yêu cầu kia không ta?

Đánh giá câu hỏi ngay!

Hãy ấn Up Vote với những câu hỏi cụ thể và chi tiết

Hãy ấn Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.

2 câu trả lời

BEST

Ảnh đại diện của Careerly AI Bot

➡ Đây là câu trả lời được tạo tự động bởi ChatGPT ⬅ Trong Next.js, tệp pages/404.js sẽ là trang tĩnh và không thể truy cập vào những dữ liệu động như cookie. Tuy nhiên, bạn có thể sử dụng một cách tiếp cận khác để giải quyết yêu cầu của mình. Bạn có thể sử dụng getServerSideProps hoặc getInitialProps để kiểm tra trạng thái đăng nhập của người dùng và sau đó render trang tương ứng. Dưới đây là một cách bạn có thể thực hiện việc này: 1. Tạo một trang không tìm thấy riêng cho người dùng đã đăng nhập, ví dụ pages/404_logged_in.js. 2. Tạo một trang không tìm thấy riêng cho người dùng chưa đăng nhập, ví dụ pages/404_not_logged_in.js. 3. Tạo một trang mới trong pages/_error.js (hoặc sử dụng getServerSideProps/getInitialProps trong các trang khác nếu bạn muốn kiểm soát lỗi 404 ở cấp độ trang). Trong file này, bạn có thể xử lý cookie và kiểm tra trạng thái đăng nhập của người dùng. Dưới đây là một ví dụ với getInitialProps. Trong ví dụ này, checkUserLogin(req) là một hàm mà bạn sẽ viết để kiểm tra trạng thái đăng nhập của người dùng từ request. Nếu người dùng đã đăng nhập, hàm này sẽ trả về true, ngược lại sẽ trả về false. Cách tiếp cận này cho phép bạn hiển thị trang 404 khác nhau dựa trên trạng thái đăng nhập của người dùng. --- ✅Bạn có thể để lại bình luận ở dưới để đánh giá câu trả lời từ ChatGPT đã tốt chưa, hay vẫn còn điểm nào sai hoặc thiếu sót.

1// pages/_error.js
2
3import React from 'react'
4import PageNotFoundLoggedIn from './404_logged_in'
5import PageNotFoundNotLoggedIn from './404_not_logged_in'
6
7class ErrorPage extends React.Component {
8  static async getInitialProps({ req }) {
9    const isUserLoggedIn = checkUserLogin(req) // Viết hàm này để kiểm tra trạng thái đăng nhập từ request
10
11    return { isUserLoggedIn }
12  }
13
14  render() {
15    if (this.props.statusCode === 404) {
16      return this.props.isUserLoggedIn ? <PageNotFoundLoggedIn /> : <PageNotFoundNotLoggedIn />
17    }
18
19    // ... handle other status codes
20
21    return <p>An unknown error occurred.</p>
22  }
23}
24
25export default ErrorPage
Ảnh đại diện của Hien Nguyen

Nếu không phải là httpOnly cookie thì bạn có thể check giá trị ở cookie hoặc javascript. Nếu bạn buộc phải check qua httpOnly cookie thì chắc bạn có thể xử lý ở trang 404 bạn gửi yêu cầu cùng cookie bằng server rồi nhận giá trị đăng nhập hay chưa nha.

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.

Xem thêm

Đồng ý với Điều khoản dịch vụ Chính sách bảo mật của Careerly

Bạn đã có tài khoản rồi?

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.