วิธีการคงผู้ใช้ที่เข้าสู่ระบบในการตอบสนอง

หากคุณทำการค้นหาโดย Google อย่างรวดเร็วเพื่อค้นหาผู้ใช้ที่ลงชื่อเข้าใช้อยู่ใน React (หรือให้ผู้ใช้ล็อกอินใน React) คุณจะไม่ได้ผลลัพธ์ที่ตรงไปตรงมา ไม่มีตัวอย่างง่ายๆในการทำตามวิธีการบรรลุเป้าหมายนี้ ดังนั้นฉันจึงตัดสินใจว่าจะต้องเขียนคำแนะนำง่ายๆนั้น

คุณอาจค้นหาสิ่งนี้แล้วและเห็นคำว่าlocalStorageถูกโยนทิ้งไป ใช่เราจะใช้localStorageแต่ฉันจะแสดงให้คุณเห็นว่ามันทำอย่างไร

หมายเหตุเกี่ยวกับ localStorage

  1. localStorageคือฐานข้อมูลของเบราว์เซอร์ ข้อมูลจะถูกเก็บไว้ในเบราว์เซอร์ของคุณในหน่วยความจำของคอมพิวเตอร์ของคุณ
  2. localStorageเป็นข้อมูลเฉพาะสำหรับแหล่งกำเนิด กล่าวอีกนัยหนึ่ง localStorage สำหรับเว็บไซต์หนึ่งไม่สามารถเข้าถึงได้โดยอีกเว็บไซต์หนึ่ง

ตั้งค่าเริ่มต้น

มาเริ่มกันเลย. ฉันได้ติดตั้งเซิร์ฟเวอร์ด่วนธรรมดากับ Heroku เพื่อใช้ในการทดสอบแอปพลิเคชันนี้

  1. สร้างแอปพลิเคชัน React ใหม่และเข้าไปที่ส่วนประกอบ
  2. ติดตั้งแกนโดยใช้npm install axiosและนำเข้าภายใน
  3. จากนั้นสร้างแบบฟอร์มการเข้าสู่ระบบง่ายๆที่ยอมรับชื่อผู้ใช้และรหัสผ่าน
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return (  Username:   setUsername(target.value)} /> password:   setPassword(target.value)} /> Login  ); }; export default App; 

อย่างที่คุณเห็นเราได้กำหนดฟังก์ชันhandleSubmitแบบอะซิงโครนัสเพื่อประมวลผลคำขอเข้าสู่ระบบ นอกจากนี้เรายังได้กำหนดเงื่อนไขที่แสดงuser.name ถูกบันทึกในข้อความหากเรามีผู้ใช้และแบบฟอร์มการเข้าสู่ระบบหากเราไม่มีผู้ใช้

ต่อไปมาทำหน้าที่ให้สมบูรณ์ ฟังก์ชันนี้จะทำงานในขั้นตอนต่อไปนี้:

  1. ส่งรายละเอียดการเข้าสู่ระบบไปยังเซิร์ฟเวอร์
  2. หากการร้องขอสำเร็จ (async-await) ให้จัดเก็บข้อมูลผู้ใช้ใน localStorage และตั้งค่าสถานะของผู้ใช้

จัดการเหตุการณ์การเข้าสู่ระบบ

มากำหนดตัวจัดการเหตุการณ์handleSubmit

const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; 

หมายเหตุ: ใช้บล็อกtryCatchเพื่อจัดการข้อผิดพลาดในฟังก์ชัน async

เมื่อฟังก์ชั่นของเราเสร็จแล้วคุณสามารถเรียกใช้npm startเพื่อทดสอบแอปของคุณ เข้าสู่ระบบด้วยชื่อผู้ใช้ : user2, รหัสผ่าน : รหัสผ่าน

คุณควรได้รับสิ่งต่อไปนี้เป็นการตอบกลับ หมายเลขผู้ใช้ , โทเค็นและชื่อผู้ใช้

ตรวจสอบว่าผู้ใช้เคยเข้าสู่ระบบก่อนหน้านี้หรือไม่

ต่อไปเราต้องการวิธีตรวจสอบว่ามีผู้ใช้เข้าสู่ระบบทุกครั้งที่โหลดแอปหรือไม่ สำหรับสิ่งนั้นเราใช้ตะขอ useEffect

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

อย่าลืมใช้อาร์เรย์อ้างอิงว่างใน useEffect hook ของคุณเพื่อให้ตรวจสอบว่ามีผู้ใช้ที่เข้าสู่ระบบในครั้งแรกที่โหลดแอปหรือไม่

ตอนนี้แอปของเราควรทำงานได้อย่างสมบูรณ์ เราได้รับหน้าด้านล่างหลังจากที่ผู้ใช้เข้าสู่ระบบเป็นครั้งแรกและรายละเอียดจะถูกจัดเก็บไว้ หากคุณรีเฟรชหน้านี้คุณจะเห็นว่าผู้ใช้ของเรายังคงล็อกอินและหน้าล็อกอินยังคงแสดงอยู่

สำหรับเคล็ดลับโบนัสนี่คือวิธีใช้การออกจากระบบ

การใช้งานฟังก์ชัน Logout

สำหรับการออกจากระบบเราเพียงแค่ล้างสถานะผู้ใช้และลบผู้ใช้ออกจาก localStorage

มาใช้กันเถอะ

ขั้นแรกเราสร้างปุ่มออกจากระบบ

logout 

จากนั้นเราสร้างฟังก์ชันออกจากระบบ

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

เท่านี้ก็เสร็จแล้ว

นี่คือลิงค์ไปยังส่วนสำคัญทั้งหมดของ GitHub คุณสามารถติดตามฉันได้ที่นั่นสำหรับการอัปเดตเพิ่มเติม