Muat semula Token dalam Sudut

Mengekalkan sesi pengguna tanpa log masuk berterusan adalah kunci kepada pengalaman web yang lancar. Dalam blog ini, saya akan menunjukkan kepada anda cara melaksanakan aliran kerja muat semula token dalam Angular, mengendalikan ralat 401 dan mengurus permintaan serentak dengan berkesan.

---

Apakah Aliran Kerja Token Segar Semula?

Dalam sistem pengesahan, token akses mempunyai jangka hayat yang singkat untuk meminimumkan risiko keselamatan. Apabila token akses tamat tempoh, token muat semula membenarkan aplikasi meminta token akses baharu daripada pelayan tanpa memerlukan pengguna log masuk semula.

---

Pelaksanaan Sudut

Kami akan melaksanakan mekanisme token muat semula menggunakan HttpInterceptor Angular. Matlamatnya adalah untuk memintas permintaan yang tidak dibenarkan (401 ralat) dan memuat semula token sebelum mencuba semula permintaan asal.

---

Aliran Kerja Lengkap

• Minta Permintaan:
  Pemintas mengesan respons 401 Tanpa kebenaran.

• Muat Semula Token:
  Jika token telah tamat tempoh, refreshToken mengambil token baharu.

• Permintaan Cuba Semula:
  Permintaan asal dicuba semula dengan token baharu.

• Pengurusan Baris Gilir:
  Permintaan yang belum selesai diproses setelah token dimuat semula.

---

Gambaran Keseluruhan Kod

1. Logik Penyegaran Token Kaedah handleUnauthorized mengendalikan penyegaran token apabila permintaan gagal disebabkan oleh token tamat tempoh.

handleUnauthorized(
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<any> {
  if (!this.isRefreshingToken) {
    this.isRefreshingToken = true;

    // Notify all waiting requests that the token is being refreshed
    this.tokenSubject.next(null);

    return this.refreshToken().pipe(
      switchMap((newToken: string) => {
        if (newToken) {
          this.tokenSubject.next(newToken);
          // Retry the original request with the new token
          return next(this.addToken(req, newToken));
        }

        // If token refresh fails, log out the user
        this.logout();
        return throwError(() => 'Token expired');
      }),
      catchError((error) => {
        this.logout(); // Log out on error
        return throwError(() => error);
      }),
      finalize(() => {
        this.isRefreshingToken = false; // Reset the flag
      }),
    );
  } else {
    // Queue requests while a token is being refreshed
    return this.tokenSubject.pipe(
      filter((token) => token != null),
      take(1),
      switchMap((token) => next(this.addToken(req, token))),
    );
  }
}

Fungsi tanpa kebenaran pemegang direka untuk mengurus senario di mana permintaan HTTP menerima status 401 Tanpa Kebenaran, menunjukkan bahawa token akses telah tamat tempoh atau tidak sah. Fungsi ini memastikan bahawa aplikasi boleh memuat semula token dan mencuba semula permintaan yang gagal dengan lancar.

1. Halang Permintaan Muat Semula Berbilang Fungsi ini menggunakan bendera isRefreshingToken untuk memastikan hanya satu permintaan muat semula token dibuat pada satu masa. Jika token sudah dimuat semula, permintaan seterusnya akan dibariskan sehingga token baharu tersedia.

handleUnauthorized(
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<any> {
  if (!this.isRefreshingToken) {
    this.isRefreshingToken = true;

    // Notify all waiting requests that the token is being refreshed
    this.tokenSubject.next(null);

    return this.refreshToken().pipe(
      switchMap((newToken: string) => {
        if (newToken) {
          this.tokenSubject.next(newToken);
          // Retry the original request with the new token
          return next(this.addToken(req, newToken));
        }

        // If token refresh fails, log out the user
        this.logout();
        return throwError(() => 'Token expired');
      }),
      catchError((error) => {
        this.logout(); // Log out on error
        return throwError(() => error);
      }),
      finalize(() => {
        this.isRefreshingToken = false; // Reset the flag
      }),
    );
  } else {
    // Queue requests while a token is being refreshed
    return this.tokenSubject.pipe(
      filter((token) => token != null),
      take(1),
      switchMap((token) => next(this.addToken(req, token))),
    );
  }
}

1. Segarkan semula Token Jika tiada permintaan muat semula sedang dijalankan, ia memulakan muat semula token menggunakan kaedah refreshToken. Sebaik sahaja token baharu diterima:

• Ia disimpan dalam tokenSubject.
• Permintaan asal dicuba semula dengan token yang dikemas kini.

if (!this.isRefreshingToken) {
  this.isRefreshingToken = true;
  this.tokenSubject.next(null);

1. Kendalikan Permintaan Serentak Jika penyegaran token sedang dijalankan, fungsi itu akan membuat baris gilir permintaan berikutnya. Permintaan ini menunggu tokenSubject mengeluarkan token baharu sebelum meneruskan.

return this.refreshToken(url).pipe(
  switchMap((newToken: string) => {
    if (newToken) {
      this.tokenSubject.next(newToken);
      return next(this.addToken(req, newToken));
    }
    this.logout();
    return throwError(() => 'Token expired');
  }),

1. Pengendalian Ralat Jika penyegaran token gagal atau mengeluarkan pengecualian:

• Pengguna telah log keluar.
• Ralat dikembalikan kepada pemanggil.

return this.tokenSubject.pipe(
  filter((token) => token != null), // Wait for a non-null token
  take(1), // Only take the first emitted token
  switchMap((token) => next(this.addToken(req, token))),
);

1. Pembersihan Operator muktamad memastikan bahawa bendera isRefreshingToken ditetapkan semula, membenarkan permintaan muat semula seterusnya.

catchError((error) => {
  this.logout();
  return throwError(() => error);
}),

---

Menambah Token pada Permintaan
Kaedah addToken menambahkan token baharu pada pengepala permintaan keluar.

finalize(() => {
  this.isRefreshingToken = false;
}),

---

Menggunakannya dalam Pemintas HTTP Sudut

HttpInterceptor ialah tempat yang sesuai untuk melaksanakan aliran kerja ini. Ia membolehkan anda memintas semua permintaan HTTP dan mengendalikan pengurusan token secara global tanpa mengubah suai panggilan perkhidmatan individu.

addToken(request: HttpRequest<any>, token: string): HttpRequest<any> {
  return request.clone({
    setHeaders: {
      'X-Token': token,
    },
  });
}

Ringkasnya, aliran kerja segar semula token yang kukuh memastikan pengalaman pengguna yang lancar dan pengurusan sesi yang selamat dalam aplikasi Angular. Dengan mengendalikan ralat 401 dengan berkesan dan mengurus permintaan serentak, anda boleh mengekalkan kebolehpercayaan dan memastikan pengguna anda gembira. Terima kasih kerana membaca—sila berkongsi pendapat atau soalan anda di bawah!

Atas ialah kandungan terperinci Muat semula Token dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!