angular 中的 POST 請求返回 401 令牌無效

Question

我需要幫助來理解和實施如何在單擊按鈕時將產品添加到我的購物車。 在我的示例中，我有一個從 API 獲得的產品列表，每個產品都有一個 + 和 - 按鈕來增加其數量，並在第一次單擊 + 按鈕時將其添加到購物車...

我想通過單擊 + 按鈕實現這一點，我的 API 發生了一個發布請求，然后將該產品添加到我的購物車中。 如果價格發生變化，我的 API 電話也會檢查並更新價格。

現在我創建了一個 cart.service 文件，我在其中添加了波紋管代碼，但我不斷收到 401 錯誤（

{status: 401, message: "token_invalidate"}
message: "token_invalidate"
status: 401

) 在控制台中單擊按鈕...我的錯誤是什么？

cart.service.ts 文件：

  addUpdateProductToCart(quantity: number, produkt: Product) {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        // Initialize Params Object
        let params = new HttpParams();
        // Begin assigning parameters
        params = params.append('product', produkt.id);
        params = params.append('quantity', quantity);
        return this.httpClient.post(`${environment.apiUrl}cart`, { headers, observe: 'response' }, {params});
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          // this.authService.logout();
          // this.router.navigateByUrl('/login', { replaceUrl: true });
        }
        return EMPTY;
      }),
    );
  };

這就是我在列出產品的頁面(subcategory.page.ts) 中觸發此 POST 請求的方式：

  incrementQty(index: number, produkt: Product) {
   
    const newQty = this.products[index].step += 1.00;

    this.cartService.addUpdateProductToCart(newQty, produkt).subscribe(
        data => {
          console.log(data);
        },
        error => {
          console.log('Error', error);
        }
        );
  }

和 html 代碼：

<ion-label>
  <div class="d-flex ion-justify-content-between">
     <div class="prod-details-wrapper">
                      <p class="product-id">{{ produkt.product_code }}</p>
                      <p class="product-em">EM: {{ produkt.unit }}</p>
                      <p class="product-packaging">Pakiranje: {{ produkt.min_weight }} {{ produkt.unit }}</p>
                    </div>
                    <div class="qty-input-wrapper">
                      <ion-item lines="none" slot="end">
                        <ion-icon color="vigros" name="remove-circle" (click)="decrementQty(i, produkt)"></ion-icon>
                        <ion-input type="number" value="0" min="0" step="1" [(ngModel)]="produkt.step"></ion-input>
                        <ion-icon color="vigros" name="add-circle" (click)="incrementQty(i, produkt)"></ion-icon>
                      </ion-item>
                    </div>
                  </div>
                </ion-label>

Answer 1

Post 需要一個 body，不管它是否為空。

如果您使用 Visual Code，您可以通過 hover 方法查看哪些參數是必需的以及參數的順序。 ？ 或者。 在參數之后並不意味着您可以跳過它，只需將其記為 null 或未定義即可。

-> post(url, body, headers, params)

添加令牌的方式應該有效。 您是否 100% 確定您擁有有效的令牌？

如果在收到 console.log(token) 后沒有放置它並嘗試使用 postman/swagger 請求，看看是否仍然收到 401 錯誤。

此外，如果它是您的 API，只需調試它並找出授權失敗的時間點。