nextjs jwt authentication

next.js jwt การรับรองความถูกต้อง

แอพพิสูจน์แนวคิดสำหรับการแสดงให้เห็นถึงการรับรองความถูกต้องของแอป Next.js กับ JWT

แอพนี้ทำภายใต้สมมติฐานที่ว่าเซิร์ฟเวอร์การเรนเดอร์และเซิร์ฟเวอร์ API ถูกแยกออก

มันใช้ API นี้สำหรับการตรวจสอบสิทธิ์

ความคิด:

แอพที่แสดงผลด้านเซิร์ฟเวอร์นั้นยอดเยี่ยมมาก พวกเขาสร้างจุดที่น่าสนใจระหว่างแอพเสาหินและแอพหน้าเดียวที่ขับเคลื่อนโดย Microservices แต่พวกเขายังเพิ่มความซับซ้อนให้กับการสร้างของพวกเขา การรักษาสถานะบนเซิร์ฟเวอร์และไคลเอนต์ในการซิงค์การกำหนดเส้นทางบนไคลเอนต์และเซิร์ฟเวอร์การโหลดข้อมูลก่อนการเรนเดอร์เซิร์ฟเวอร์ ฯลฯ เป็นบางสิ่งที่ทำให้แอพของเรามีความซับซ้อนมากขึ้น นั่นคือเหตุผลที่เฟรมเวิร์กเช่น next.js มีอยู่เพื่อแก้ปัญหาส่วนใหญ่เหล่านั้น อย่างไรก็ตามสิ่งต่าง ๆ เช่นการตรวจสอบความถูกต้องของเรา นี่เป็นความพยายามที่จะใช้การตรวจสอบตาม JWT สิ่งนี้คือเราไม่สามารถเก็บโทเค็นในพื้นที่ท้องถิ่นได้เช่นเดียวกับที่เราทำกับสปา

แนวคิดคือการรับโทเค็นจากเซิร์ฟเวอร์บนไคลเอนต์เก็บไว้ในคุกกี้และจากนั้นเมื่อใดก็ตามที่หน้าแสดงผลบนเซิร์ฟเวอร์เราจะสามารถเข้าถึงโทเค็นจากคุกกี้ได้

มันทำงานอย่างไร:

ลูกค้า:

ผู้ใช้ส่งคำขอรับรองความถูกต้องจากไคลเอนต์ ในการตอบสนองได้รับ JWT และเก็บไว้ในคุกกี้เบราว์เซอร์และร้านค้า Redux จากนั้นผู้ใช้สามารถเข้าถึงโทเค็นจากไคลเอนต์และสามารถใช้เพื่อเข้าถึงเส้นทางที่ได้รับการป้องกัน

เซิร์ฟเวอร์:

เมื่อผู้ใช้ทำการร้องขอหน้าคุกกี้ก็จะถูกส่งไปด้วยดังนั้นเซิร์ฟเวอร์สามารถอ่านได้ ในการอ่านผู้ใช้ใช้วิธีการใช้งาน Lifecycle getInitialProps ซึ่งจัดทำโดย Next.js. มันได้รับการโต้แย้ง - วัตถุบริบทที่มีคุณสมบัติบางอย่าง คุณสามารถอ่านเพิ่มเติมได้ที่นี่ ในคุณสมบัติ req เราสามารถเข้าถึงคุณสมบัติ headers ซึ่งมีคุกกี้ด้วยโทเค็น ผู้สร้างแอ็คชั่นถูกส่งไปบันทึกโทเค็นใน Redux Store และตอนนี้แอพสามารถเข้าถึงโทเค็นได้อีกครั้ง

การใช้งาน:

การติดตั้ง:

ตรวจสอบให้แน่ใจว่าคุณติดตั้งโหนดและ NPM

ตรวจสอบให้แน่ใจว่าคุณมีเซิร์ฟเวอร์ API ที่ทำงานอยู่

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

เริ่มต้นแอพ:

 # Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start