Headers & Otorisasi Sesi
Proyek tanpa otentikasi hanya menggunakan createHttpClient, dan hanya menambahkan HeaderStore dan otentikasi sesi jika diperlukan.
Kode commonService.ts di halaman ini adalah bagian dari keseluruhan file.
Kode HeaderStore, headersProvider, sessionAuth di bawah ini tidak merupakan contoh file yang saling independen, tetapi menjelaskan setiap bagian dari adapter HTTP umum proyek (rxjsHttpService.ts/commonService.ts). Jika Anda ingin melihat struktur file lengkap, lihat kode lengkap minimum dan ekstensif dari HTTP Client sebelum membaca halaman ini.
header yang dibagikan di browser
header seperti access token yang diterima setelah login yang harus digunakan oleh beberapa layananHeaderStoredapat disimpan di.
commonService.ts
tsimport { createHeaderStore } from "@byeolnaerim/typed-rx-http";
export const headerStore = createHeaderStore({
"Content-Type": "application/json",
});
headerStore.merge({
Authorization: `Bearer ${accessToken}`,
});
headerStore.remove("Authorization");Di Next.js, pisahkan header browser dan server
Komponen Klien membaca HeaderStore, dan Komponen Server membaca cookie. headersProviderdapat dibuat. Fungsi ini dapat memisahkan cara pengambilan header CSR dan SSR di satu tempat.
commonService.ts
tsconst headersProvider = async () => {
if (typeof window !== "undefined") {
return headerStore.get();
}
const { cookies } = await import("next/headers");
const accessToken = (await cookies()).get("accessToken")?.value;
return accessToken
? { Authorization: `Bearer ${accessToken}` }
: {};
};
export const service = createHttpClient<paths>({
baseUrl: process.env.NEXT_PUBLIC_API_URL || "",
headerStore,
headersProvider,
});headersProviderJika Anda mengirimkan, hasil provider akan digunakan saat permintaan. Seperti contoh di atas, jika Anda mengembalikan HeaderStore secara langsung di dalam provider saat di browser, Anda dapat menangani CSR dan SSR di satu tempat.Jika refresh 401 diperlukan, bungkus sekali di callApi
Jangan modifikasi layanan yang dihasilkan secara otomatis satu per satu, tambahkan operator sesi dicallApisehingga semua layanan yang dihasilkan menggunakan aturan pencarian dan refresh token yang sama.
commonService.ts
tsimport { createSessionAuth } from "@byeolnaerim/typed-rx-http";
import { defer } from "rxjs";
const sessionAuth = createSessionAuth({
headerStore,
tokenUrl: "/api/auth/token",
refreshUrl: "/api/auth/token/refresh",
logoutUrl: "/api/auth/logout",
onLoginChange: (loggedIn) => setLogin(loggedIn),
});
export const callApi = (serviceArguments) =>
defer(() => service.callApi(serviceArguments)).pipe(
sessionAuth.withSessionAuth(),
);Jika tidak ada Authorization, periksa endpoint token terlebih dahulu, dan jika permintaan asli adalah 401, lakukan permintaan ulang setelah refresh. Jika refresh juga gagal, panggil endpoint logout dan sampaikan kesalahan asli.
Jika hanya perlu sinkronisasi token tanpa refresh/retry.
Untuk menyinkronkan token sebelum permintaan tanpa menggunakan 401 refresh/retry, gunakan withEnsureToken().
return client.callApi(...).pipe(
auth.withEnsureToken(),
);Jika tidak memerlukan otentikasi
export const { callApi, callApiStream } = createHttpClient<paths>({
baseUrl: "/api",
});Untuk API publik atau proyek sederhana, ini sudah cukup. HeaderStore dan otentikasi sesi bukanlah struktur yang wajib.