android - 如何在基于 Angular cordova 应用程序中正确处理 X-CSRF-TOKEN？

Question

我有一个 Angular (v10) WebApp，它可以正确处理 X-CSRF-TOKEN cookie，如 Angular Guide 中所述通过在我的导入中使用 HttpClientXsrfModule，即:

  // app.module.ts
HttpClientModule,
HttpClientXsrfModule.withOptions({
  cookieName: 'XSRF-TOKEN',
  headerName: 'X-XSRF-TOKEN',
}),

并通过在我的服务请求中设置相对路径，例如:

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
      return this.httpClient.delete(`api/X/${x_id}`);
  }

现在，浏览器本身会处理从服务器获取 token 并通过每个后续的 POST/DELETE/PUT/PATCH 请求成功发送 token 。

但是，如果我现在将应用程序编译为使用 cordova 的 Android 应用程序，该应用程序会向 file:///android_asset/www/api/X/1068 发送请求(x_id=1068)。 我可以修改我的 http 服务以轻松使用特定于平台的绝对/相对路径，例如:

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
    if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
      return this.httpClient.delete(`${environment.baseUrl}/api/X/${x_id}`);
    } else {
      return this.httpClient.delete(`api/X/${x_id}`);
    }
  }

但是，Android 应用程序对我的请求的响应是

error: "access_denied"
error_description: "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'."

我该怎么做才能为我的 cordova 编译的 Android 应用程序添加对 X-XSRF-TOKEN 的正确处理？

Answer 1

我最终使用了 cordova-plugin-advanced-http ，即提供描述的响应 cookie 获取机会 here . 我创建了一个通用的 http 服务，其中包含每个 HTTP 方法(GET、HEAD、PATCH、PUT、POST、DELETE)的通用方法，它首先检查正在运行的平台，然后转发调整后的请求。

通用 GET 示例(伪代码):

// generic-http-service.ts
   
public get<T>(url: string, queryParams?: any): Observable<T> {
   if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
       // android-specific solution
       // 1. adjust params
       // 2. set general headers + the XSRF-TOKEN from the previous sendt request
       // 3. return Observable(obs) {
       // 4. send:
       cordova.plugin.http.get(`${environment.baseUrl}/${url}`, adjustedParams, adjustedHeaders, 
              successResponse => { 
                  // 5. fetch & save XSRF-TOKEN
                  obs.next(JSON.parse(successResponse.data) as T);
              }, errorResponse => { 
                  obs.error(errorResponse);
              })
       }
   } else {
       // web-specific solution based on the angular guide
       return this.httpClient.get(`${url}`);
   }
}

后来我只需要稍微调整一下我的服务。