ตรวจสอบว่า Axios มีคุกกี้เซสชันหรือไม่

Question

ฉันใช้ตัวป้องกันการนำทางสำหรับแอปพลิเคชัน Vue.js ของฉันตรวจสอบว่าผู้ใช้ล็อกอินอยู่หรือไม่ฉันคิดว่าวิธีที่ดีที่สุดคือถาม Axios ว่ามีคุกกี้เซสชันหรือไม่ สิ่งนี้:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

ยกเว้นแน่นอนว่าhasSessionCookie()ไม่มีอยู่และฉันไม่เห็นสิ่งที่เหมือนในเอกสารนี้ มีวิธีการบางอย่างหรือไม่?

ใช่ฉันรู้ว่าฉันสามารถจัดเก็บสถานะการเข้าสู่ระบบในร้านค้า VueX ได้ ฉันไม่คิดว่ามันเป็นความคิดที่ดีเพราะสถานะจะรีเซ็ตหากผู้ใช้ด้วยสติปัญญาที่ไม่มีที่สิ้นสุดของเขารีเฟรชหน้าและรีเซ็ตแอปพลิเคชัน อีกวิธีหนึ่งที่ฉันคิดไว้คือจุดสิ้นสุดแบ็กเอนด์ที่แอปสามารถ "ถาม" ว่ามีการเข้าสู่ระบบหรือไม่ แต่ก็ค่อนข้างง่อยเช่นกัน

Answer 1

ขอบคุณสำหรับทุกเคล็ดลับ ทางออกที่ถูกต้องมีดังต่อไปนี้:

• VueX เก็บสถานะการเข้าสู่ระบบ (เพียงแค่แฟล็กบูลีน) ซึ่งเจ้าหน้าที่นำทางจะตรวจสอบ
• เมื่อผู้ใช้ล็อกอินหรือล็อกเอาต์ฉันตั้งค่าสถานะ
• เมื่อแอปเปิดตัวฉันจะเรียก/checkloginเส้นทางบนเซิร์ฟเวอร์ก่อนที่จะสร้างอินสแตนซ์ Vue สิ่งนี้จะส่งคืนรหัสสถานะ 200 หรือ 401 ขึ้นอยู่กับว่าผู้ใช้มีเซสชันที่ถูกต้องหรือไม่ จากนั้นฉันตั้งค่าสถานะ VueX ตามนั้น วิธีนี้ผู้ใช้สามารถรีเฟรชเบราว์เซอร์ได้ แต่ VueX จะยังรู้ว่าเขาเข้าสู่ระบบหรือไม่
• นอกจากนี้ฉันยังเพิ่มเครื่องสกัดกั้น Axios เพื่อตรวจหาข้อผิดพลาด 401 หากมีแสดงว่าเซสชันหมดอายุแล้ว จากนั้นตั้งค่าแฟล็ก VueX เป็นfalseและเปลี่ยนทิศทางผู้ใช้ไปยังเพจล็อกอิน

ฉันเขียนบทความในบล็อกขนาดกลางพร้อมรายละเอียดและตัวอย่างหากใครสนใจ https://medium.com/developer-rants/session-management-between-express-and-axios

Answer 2

เนื่องจากเป็นคุกกี้ฝั่งเซิร์ฟเวอร์คุณจึงไม่สามารถตรวจสอบได้จากจาวาสคริปต์ฝั่งไคลเอ็นต์คุณต้องส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ด่วนของคุณเพื่อตรวจสอบว่ามีเซสชันอยู่หรือไม่ สร้างเส้นทางง่ายๆบนเซิร์ฟเวอร์ด่วนของคุณดังนี้:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

จากนั้นตรวจสอบ vue navigation guard:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Answer 3

คุณกำลังไปในทิศทางที่ถูกต้อง แต่ axios เป็นไคลเอนต์ HTTP และไม่มีส่วนเกี่ยวข้องกับคุกกี้และไม่สนใจคุกกี้หรือที่เก็บข้อมูล .. ดังนั้นคุณต้องใช้แพ็คเกจเช่นvue-cookiesเพื่อตั้งค่าและรับคุกกี้

Answer 4

TamásPolgárคุณบันทึกความท้าทายเดียวกันกับ Vue; จะทำอย่างไรกับการเข้าสู่ระบบหากเกิดเหตุการณ์ที่ไม่คาดคิดในเบราว์เซอร์และร้านค้าสูญหาย

ร้าน Vue:

ร้านค้า Vue มีไว้เพื่อเป็นสถานที่ที่สะดวกสำหรับสปาในการจัดเก็บค่าสถานะดังกล่าว (เข้าสู่ระบบหรือไม่) อย่างไรก็ตามร้านค้าจะถูกลบและสร้างขึ้นใหม่ด้วยอินสแตนซ์ Vue แต่ละรายการซึ่งหมายถึงหน้าต่าง / แท็บเบราว์เซอร์ใหม่ รีเฟรชหรือเหตุการณ์ที่ไม่คาดคิดอื่น ๆ ที่ทำให้เกิดการรีเฟรชเบราว์เซอร์

ดังนั้นแนวทางของคุณจึงอธิบายถึงการโทรแบบแบ็คเอนด์พิเศษเพื่อตรวจสอบสถานะอย่างรวดเร็วซึ่งเป็นโซลูชัน IMO ที่ถูกกฎหมายและสามารถทำงานได้

นอกจากนี้ยังมีโซลูชันที่เป็นไปได้อีกสองวิธีซึ่งวิธีที่สองที่ฉันใช้ในสปาของตัวเอง:

สองโซลูชั่นอื่น ๆ

1)อย่าแตะรหัสส่วนหลังของคุณเลย ใช้vue-cookiesเพื่อให้เบราว์เซอร์ไคลเอนต์ตั้งค่าคุกกี้เมื่อมีการล็อกอิน (จะแยกจากคุกกี้ http อย่างเดียวที่เซิร์ฟเวอร์ back-end API ต้องการ)

คุกกี้นี้ควรยังคงอยู่หลังจากรีเฟรชเบราว์เซอร์ ฉันไม่ได้ใช้ (หรือลองใช้) วิธีนี้อย่างไรก็ตามเนื่องจากฉันไม่ต้องการยุ่งกับการแก้ไขส่วนหน้าเพื่อตรวจสอบคุกกี้ในเครื่องทุกครั้งที่ฉันต้องการตรวจสอบสถานะการเข้าสู่ระบบ

โค้ดส่วนหน้าสามารถใช้คุกกี้นี้เพื่อดูว่าบุคคลนั้นยังคงล็อกอินอยู่หรือไม่

2)อีกวิธีหนึ่งที่แยกจากกันคือการลัดวงจรการตรวจสอบ API แบ็คเอนด์ปกติสำหรับการตรวจสอบความถูกต้องสำหรับตัวควบคุมของเส้นทางนั้นๆ เท่านั้น แต่ไม่ใช่สำหรับเส้นทางอื่น

นี่คือวิธีที่ 'ลัดวงจร' ที่ส่วนหลังจะทำงาน:

ในกรณีของวิธีการควบคุมของเส้นทางนั้น ๆ ให้ตรวจสอบการมีอยู่ของผู้ใช้ในคำขอก่อนจากนั้นส่งคืน 200 แต่มีสถานะเป็น "เท็จ" หรือตัวแปรอื่น ๆ ซึ่งปรากฏในการตอบสนองความสำเร็จด้วย

มันใช้งานง่าย แต่สิ่งนี้ทำให้ Axios ส่วนหน้าเรียกสิ่งที่ต้องคว้าไปนอกเหนือจากการตอบสนองข้อผิดพลาดมาตรฐาน

หมายเหตุ : ฉันเรียกมันว่า "การลัดวงจร" เพราะหากวิธีการควบคุมของเส้นทาง API ส่วนหลังมีโค้ดจำนวนมากการตรวจสอบสิ่งนี้เป็นครั้งแรกจะหลีกเลี่ยงการโทรส่วนที่มีค่าใช้จ่ายสูง

วิธีนี้ใช้ได้กับความต้องการของฉันอย่างสมบูรณ์และไม่จำเป็นต้องมีการเรียก API ใหม่หรือรอง