REST API身份验证错误：WooCommerce

Question

现在一直试图从WooCommerce REST API中获取产品，我的大脑正在流血：'（我按照woocommerce和github/woocommerce上的所有说明进行了操作，我不能在生活中得到任何东西使用基本身份验证：

但是当我选择 Auth 1.0 时 - 我会收到所有产品：

但是，如果我使用 Auth 1.0 生成的网址并将其放入浏览器中：

.. HTTP身份验证（here）下的说明描述了当我在邮递员中选择验证1.0 时自动生成的参数 - 但是如何我会在我的React组件中生成那些吗？

const APP_URL = 'http://0.0.0.0:80'
const CONSUMER_KEY = 'ck_xxxx'
const CONSUMER_SECRET = 'cs_xxxx'
const PRODUCT_URL = `${APP_URL}/wp-json/wc/v2/products?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`

fetch(PRODUCT_URL).then(res => {
    if(res.status === 200){
      return json
    } else {
      console.log("ERROR RESPONSE STATUS: " + status);
    }
  }).then( json => {
    console.log(json)
  })
})

非常感谢所有的投入！

Answer 1

我认为这个问题可以通过下面的代码使用“拦截器”概念来解决......

 import {
  Injectable,
  // Injector
 } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
// import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

// import { AuthService } from './auth.service';
import { config } from '../config/config';

@Injectable()
export class AppInterceptor implements HttpInterceptor {

  constructor(
    // private injector: Injector,
    // private router: Router
  ) { }

  private includeWooAuth(url) {
    const wooAuth = `consumer_key=${config.consumerKey}&consumer_secret=${config.secretKey}`;
    const hasQuery = url.includes('?');
    let return_url = '';
    if (hasQuery) {
      return_url =  wooAuth;
    } else {
      return_url = '?' + wooAuth;
    }
    return return_url;
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // const auth = this.injector.get(AuthService);
    const authRequest = request.clone({
      setHeaders: {
        // Authorization: `Bearer ${auth.getToken()}`
      },
      url: `${config.basePath}/${request.url}${this.includeWooAuth(request.url)}`
    });

    return next.handle(authRequest)
      .catch(err => {
        if (err instanceof HttpErrorResponse && err.status === 0) {
          console.log('Check Your Internet Connection And Try again Later');
        } else if (err instanceof HttpErrorResponse && err.status === 401) {
          // auth.setToken(null);
          // this.router.navigate(['/', 'login']);
        }
        return Observable.throw(err);
      });
  }
}

此代码将保存在 http.interceptor.ts 中。显然，您应该将消费者密钥和woocommerce API的其他细节初始化为常量变量。之后，您创建一个服务，以显示产品列表，如下所示：

retriveProducts(query: ProductQuery = {}): Observable<RetriveProductsResponse> {
    return this.httpClient.get(`products`, {params: this.wooHelper.includeQuery(query), observe: 'response'})
      .pipe(
        map(value => this.wooHelper.includeResponseHeader(value)),
        catchError(err => this.wooHelper.handleError(err)));
  }

将此服务称为 product.ts 文件，如下所示：

getProducts() {
    this.woocommerceProductsService.retriveProducts()
       .subscribe(productResponse => {
        this.products = productResponse.products;
       }, error =>  this.errorMessage = <any>error);
  }

我已将上述代码用于我的项目中。我认为它会对你有帮助。