0Pricing
Angular Academy · บทเรียน

การเพิ่มส่วนหัวการยืนยันตัวตน

แนบโทเค็นไปกับคำขอขาออก

การเพิ่มส่วนหัวการยืนยันตัวตน เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ควรใช้อินเตอร์เซปเตอร์สำหรับการยืนยันตัวตน

API ส่วนใหญ่ต้องการส่วนหัว Authorization ในทุกคำขอ แทนที่จะเพิ่มส่วนหัวนี้ด้วยตนเองทุกครั้ง อินเตอร์เซปเตอร์จะเพิ่มให้โดยอัตโนมัติสำหรับคำขอขาออกทั้งหมด

การโคลนเพื่อเพิ่มส่วนหัว

เนื่องจากคำขอไม่สามารถเปลี่ยนแปลงได้ ให้โคลนด้วย setHeaders เพื่อแนบโทเค็น

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

การอ่านโทเค็นจากบริการ

ฉีดบริการยืนยันตัวตน/โทเค็นเพื่อรับโทเค็นปัจจุบัน การใช้สัญญาณหรือ BehaviorSubject ภายในบริการจะช่วยให้ค่าเป็นปัจจุบันอยู่เสมอ

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

ข้ามเมื่อไม่มีโทเค็น

หากผู้ใช้ยังไม่ได้เข้าสู่ระบบ ให้ส่งคำขอเดิมต่อไปโดยไม่เปลี่ยนแปลง

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

แนบเฉพาะกับ API ของคุณ

อย่าส่งโทเค็นของคุณไปยัง URL ของบุคคลที่สามโดยไม่ตั้งใจ ให้ตรวจสอบว่า URL ของคำขอเป็นของแบ็กเอนด์ของคุณ

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders เทียบกับ headers.set

setHeaders ใน clone เป็นวิธีที่กระชับ นอกจากนี้ยังใช้ req.headers.set(...) แล้วส่งผ่าน { headers } ได้อีกด้วย setHeaders จะรวมส่วนหัว ไม่ได้แทนที่ส่วนหัวทั้งหมด

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

การเพิ่มส่วนหัวหลายรายการ

แนบส่วนหัวหลายรายการพร้อมกันในการโคลนเพียงครั้งเดียว

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials สำหรับคุกกี้

หากการยืนยันตัวตนใช้คุกกี้ HttpOnly แทนโทเค็น ให้ตั้งค่า withCredentials เพื่อให้เบราว์เซอร์ส่งคุกกี้ข้ามต้นทาง

return next(req.clone({ withCredentials: true }));

การรีเฟรชโทเค็นที่หมดอายุ

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

การคงอินเตอร์เซปเตอร์ให้บริสุทธิ์

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

การลงทะเบียนอินเตอร์เซปเตอร์การยืนยันตัวตน

วางอินเตอร์เซปเตอร์นี้ไว้ต้นสายโซ่ เพื่อให้มีส่วนหัวอยู่ก่อนที่การบันทึกหรืออินเตอร์เซปเตอร์อื่นจะทำงาน

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการเพิ่มส่วนหัวการยืนยันตัวตนของคุณ

สรุป: การเพิ่มส่วนหัวการยืนยันตัวตน

อินเตอร์เซปเตอร์การยืนยันตัวตนจะแนบโทเค็นไปกับคำขอขาออก

  • โคลนด้วย setHeaders: { Authorization: ... }
  • ข้ามเมื่อไม่มีโทเค็น และจำกัดการทำงานไว้ที่ URL ของ API ของคุณ
  • ใช้ withCredentials สำหรับการยืนยันตัวตนด้วยคุกกี้

ถัดไป: การจัดการข้อผิดพลาดจากส่วนกลาง

คำถามที่พบบ่อย

บทเรียน “การเพิ่มส่วนหัวการยืนยันตัวตน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเพิ่มส่วนหัวการยืนยันตัวตน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มส่วนหัวการยืนยันตัวตน”

แนบโทเค็นไปกับคำขอขาออก คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การเพิ่มส่วนหัวการยืนยันตัวตน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวสกัดกั้นแบบฟังก์ชัน
  2. การเพิ่มส่วนหัวการยืนยันตัวตน
  3. การจัดการข้อผิดพลาดทั่วทั้งแอป
  4. การลองใหม่และตัวบ่งชี้การโหลด
← กลับไปที่ Angular Academy