Headers & Session Auth
For projects without authentication, only use createHttpClient, and attach HeaderStore and session auth only when necessary.
The commonService.ts code on this page is part of the entire file.
The following HeaderStore, headersProvider, and sessionAuth code are not independent file examples but explain each part of the project-wide HTTP adapter (rxjsHttpService.ts/commonService.ts). If you want to see the entire file structure first, check the complete code of the minimum complete/extended HTTP Client and then read this page.
Headers to share in the browser
Headers that multiple services need to use together, like the access token received after login,HeaderStorecan be stored in.
commonService.ts
tsIn Next.js, separate browser and server headers.
In Client Component, read from HeaderStore, and in Server Component, read from cookies. headersProviderYou can create a function that separates the header retrieval methods for CSR and SSR in one place.
commonService.ts
tsheadersProviderIf you pass it, the provider's result will be used during the request. As in the example above, if you directly return HeaderStore when in the browser inside the provider, you can handle CSR and SSR in one place.Wrap callApi once if a 401 refresh is needed.
Do not modify each auto-generated service individually; attach a session operator to the sharedcallApiThis way, all generated services will use the same token retrieval and refresh rules.
commonService.ts
tsIf there is no Authorization, first check the token endpoint, and if the original request is 401, request again after refresh. If refresh also fails, call the logout endpoint and pass the original error.
When only token synchronization is needed without refresh/retry
To synchronize the token before the request without using 401 refresh/retry, use withEnsureToken().
If authentication is not required,
this is sufficient for public APIs or simple projects. HeaderStore and session auth are not mandatory structures.