問題背景

某客戶使用了第三方的Authentication service來實現Spartacus用戶的登錄機制：

In our project we have integration with MDCIM team who handles login and authorization.
This part of code redirects the User to MDCIM URL and once authorization is completed by the User in MDCIM, the user will be landed back to our home page completing the login scenario.

Here our API redirect to MDCIM and waits for a token. Once response received we use the token to get the user information with another API call.

使用token，調用另一個API，獲取user信息。

We found out that the problem was caused by using this.windowAdapter.getWindow().sessionStorage.* without previously checking if the sessionStorage is actually available. In SSR it was undefined.

If you wrap all the calls in an if (this.windowAdapter.getWindow().sessionStorage) {...} the PLP pages are being SSRed correctly.

As an additional, browser’s storage (sessionStorage, localStorage) API is not available in SSR, therefore code defensively.

自開發的用戶認證：

customizeAuthentication(): void {this.customLoginAdapter.getMDCIMToken(this.authCode).subscribe((data: AuthTokenDetails) => {console.log('Output from MDCIM: ', data);console.log('Session Storage present: ',this.windowAdapter.getWindow().sessionStorage);if (data && data.token) {const userId = data?.userDetails?.email;const password = '';this.authService.authorize(userId, password);if (this.windowAdapter.getWindow().sessionStorage) {this.windowAdapter.getWindow().sessionStorage.setItem('MDCIM-Token', JSON.stringify(data));}this.getOuthToken();}});}

sessionStorage和localStorage都無法在SSR模式下工作。

While using SSR the page html is generated at html. However the window, sessionStorage and localStorage objects are of the browser contextual objects. SSR at server side cannot have access to these objects.

This is the reason of SSR not working on the pages where these objects are being used.

If window or localStorage objects are required to be used with SSR then include the library @ng-toolkit/universal .

An example of using window and localStorage objects with SSR can be referred at this article

最佳實踐

最好不要在SSR模式下進行用戶認證(user Authentication)相關的邏輯：

In general we don’t recommend running any authentication / authorization related code in the SSR mode, unless you are aware of all the security issues and pitfall that with it. It might be a good idea to skip the whole auth logic in the SSR mode.

解決方案

I can suggest you to try to inject the @Inject(PLATFORM_ID) protected platform: any (from @angular/core) to your custom-login.component.ts, and then check if the platform is a browser or a server with isPlatformBrowser() or isPlatformServer() ( both coming from @angular/common).

if (isPlatformServer(this.platform)) { return; } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的关于自定义的登录机制在SAP Spartacus服务器端渲染(SSR)实施过程中遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。