如何在基于角度的科尔多瓦应用程序中正确处理 X-CSRF-TOKEN？答案

【问题标题】：How to handle X-CSRF-TOKEN correctly in an angular-based cordova app?如何在基于角度的科尔多瓦应用程序中正确处理 X-CSRF-TOKEN？
【发布时间】：2020-08-25 07:15:50
【问题描述】：

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

  // 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}`);
  }

现在，浏览器自己处理从服务器获取令牌并通过每个后续 POST/DELETE/PUT/PATCH 请求成功发送。

但是，如果我现在使用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 的正确处理？

【问题讨论】：

标签： android angular cordova csrf

【解决方案1】：

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

通用 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}`);
   }
}

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

【讨论】：