ให้ Angular แสดงภาพที่ต้อง Authen ด้วย JWT
ปกติเวลาโหลดภาพบนหน้าเว็บ เราสามารถใช้ image url ตรง ๆ ได้เลย เพราะภาพส่วนใหญ่มันจะเป็น static image แบบที่ไม่ได้ต้องการการ authen อะไร แต่จะมีภาพบางประเภทที่เราอยากให้มีการ authen ก่อน เช่น การ authen ด้วย JWT ซึ่งจะเป็น token ที่ฝังอยู่ใน HTTP Header ตอนที่ request ไป ซึ่งการโหลดภาพแบบทั่ว ๆ ไป มันจะไม่ส่ง token ตัวนี้แน่ ๆ ดังนั้นเราเลยต้องหาวิธีอื่น
TLDR; ไปหาวิธีมา ก็จบตรงที่ทำ service มาครอบ HTTP Request ไว้ และให้ return ของกลับมาเป็น Blob เสร็จแล้วก็ Encode Blob นั่นเป็น base64 แล้วเอาภาพที่ encode แล้วไปใช้แทน URL ของภาพได้เลย
มาดูแต่ละขั้นตอนกัน
สร้าง Service
เริ่มที่สร้าง Service กันก่อน จะได้ Service หน้าตาแบบนี้
Service นี้มันทำอะไรบ้างนะ
หลัก ๆ คือ ใช้ http.get ไปเอาไฟล์ตาม url ที่กำหนดมา ได้ data กลับมาเป็น blob หรือหมายถึงก้อน data ที่เป็น binary นั่นแหละ โดยทำการ inject header ชื่อ Authorization ที่มีค่าเป็น Bearer <My-Token> เข้าไปด้วย เสร็จแล้วก็ subscribe รอค่ามันกลับมา แล้วโยนเข้า FileReader แล้วอ่านเป็น string แล้วแปลงค่าออกมาเป็น DataURL (URL ที่เป็นตัวข้อมูลจริง ๆ เช่น data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== โดยถ้าเป็น binary มันจะถูก encode เป็น base64 ให้อัตโนมัติ ดูเพิ่มเติมได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) พอได้ของกลับมามันก็แค่ ส่งต่อออกมาให้ผ่าน observer นั่นเอง
ทีนี้ตอนเอาไปใช้ เราใช้ได้หลายแบบเลย เช่น ยัดเข้า component ด้วยท่านี้
พอโหลดหน้า app ขึ้นมา แล้วลอง inspect network ก็จะเห็นตามรูปข้างล่างนี้
จุดที่อยากให้สังเกตคือ ตรง header authorization ก็คือของที่เรา inject เข้าไปใน service นั่นเอง
ทีนี้เราจะเอา service นี้ไปใช้ผ่าน pipe ก็ง่าย ตามนี้
เสร็จแล้วใน html เราก็แค่แก้เป็นแบบนี้
เราก็สามารถเอารูปที่ต้อง authen ด้วย JWT มาวางได้ละ
