如果使用者登入名或密碼包含符號 +，它將被替換為空格，因為 Content-Type 等於 application/x-www-form-urlencoded。

下面是一個例子：

![](https://img-blog.csdnimg.cn/img_convert/760bd5f55b8212fe2c59c3299201d57b.png)

https://<host>:9002/occ/v2/electronics-spa/forgottenpasswordtokens?lang=en&curr=USD

我輸入了包含 + 號的郵件地址後，點選 Submit，傳送一個 HTTP POST 請求到後臺，響應為 202：
![](https://img-blog.csdnimg.cn/img_convert/966ba427eb19fb950ab0431b87167d53.png)

從 Form Data 區域，我們可以發現，這個 userId 顯示為 `a  @sap.com`, 郵箱地址裡包含了空格符號：

![](https://img-blog.csdnimg.cn/img_convert/a6e526bbf7fdeeaf390578a4516b37f8.png)

![](https://img-blog.csdnimg.cn/img_convert/bac56b23dd92667725d18d52583ea943.png)

找到 Reset Password Component 的 selector：cx-forgot-password

![](https://img-blog.csdnimg.cn/img_convert/f1a2a9644f34afe6d24064ca84cfa46b.png)

Component 名稱為：ForgotPasswordComponent

透過 Service 實現：
![](https://img-blog.csdnimg.cn/img_convert/c3c2ec87b7b14f859d375c45e2bd27fb.png)

依賴於 UserPasswordFacade：
![](https://img-blog.csdnimg.cn/img_convert/ee5b94b70471645c9cae1e953c37d1ab.png)

呼叫 userProfileConnector 完成：
![](https://img-blog.csdnimg.cn/img_convert/5c7c16c07b7c6738eb47c64e8515e38e.png)

connector 呼叫 userProfileAdapter:

![](https://img-blog.csdnimg.cn/img_convert/37ff76f1a701c62a49bc3b36a56e9bb0.png)

這是一個 abstract class，我們呼叫 OCCUserProfileAdapter 實現：

![](https://img-blog.csdnimg.cn/img_convert/a37258f3029d4b27b09af048ba69c2a3.png)

OccUserProfileAdapter 最終呼叫 HTTP Client 的 post 操作：

![](https://img-blog.csdnimg.cn/img_convert/ae24df35c8fab56e45d849a2970fd9f2.png)

我們在後臺列印 Angular HTTP client 傳送過來的請求，發現確實 + 號被轉換成了空格：

![](https://img-blog.csdnimg.cn/img_convert/a06b4d294d0b6f55732b31b693222530.png)

https://github.com/angular/angular/blob/8.2.4/packages/common/http/src/params.ts#L81

這個檔案首先使用瀏覽器的 encodeURIComponent() 方法，但隨後恢復了幾個字元的編碼，包括 + 號。

一種比較合理的設計是：

感謝@meeque 參與討論這個話題。 Angular 確實不支援乾淨的編碼/解碼，這就是為什麼我們沒有為各種字元（@:$,;+=?/）獲得正確的編碼。 我瀏覽了與此主題相關的各種資源，但我不確定為什麼會跳過這些字元。

- 實現一個僅使用來自瀏覽器的 encodeURIComponent 和 decodeURIComponent 的 HttpParameterCodec
- 在我們使用 HttpParameters 的任何地方都使用編碼器，但至少在建立使用者和密碼方面
- 允許透過 DI 或透過在配置模組中配置類來覆蓋此行為

可以先在前臺進行 encode：

```typescript
const pass = encodeURIComponent(password.value);
this.auth.authorize(userId.value.toLowerCase(), pass);
```

然後在 Hybris 後臺 decode：

```java
if (credential instanceof String) {
    // if credential is a string use URLDecode class. 
    credential = URLDecoder.decode(String.valueOf(credential), StandardCharsets.UTF_8);
    if (!user.checkPassword((String) credential)) {
        throw new BadCredentialsException(this.messages.getMessage("CoreAuthenticationProvider.badCredentials", "Bad credentials"));
    }
} else {
    if (!(credential instanceof LoginToken)) {
        throw new BadCredentialsException(this.messages.getMessage("CoreAuthenticationProvider.badCredentials", "Bad credentials"));
    }
   if (!user.checkPassword((LoginToken) credential)) {
       throw new BadCredentialsException(this.messages.getMessage("CoreAuthenticationProvider.badCredentials", "Bad credentials"));
     }
}
```

後續修復進度，請跟蹤這個 Github [issue](https://github.com/SAP/spartacus/issues/4260).</host>

SAP 電商雲 Spartacus UI userID 即郵件地址中的加號問題

相關文章