Angular 2 & Slim PHP Framework：如何正确转义字符串以用于 GET 请求

如何解决Angular 2 & Slim PHP Framework：如何正确转义字符串以用于 GET 请求

环境

我有一个使用 Angular2 构建的前端，它与使用 Slim PHP Framework v4 构建的 API 进行通信。

在 Angular 前端，用户可以在表单中输入文本并提交，然后从 API 接收响应。

Angular 项目向 URL /api/{text} 发出请求。

据我所知，无法访问通过例如 Slim v4 中的 /api?text={text} 提供的参数，因此我无法利用 Angular 的 HttpParams 功能。出于这个原因，URL 被直接传递给 Angular 的 HttpClient。即

let text = 'Some random text / with special characters \.';
let myObservable: Observable<MyResponseObject[]>;
myObservable = this.http.get<MyResponseObject[]>(
  'http://my.domain.name/api/' + text
).pipe(catchError(this.handleError));

问题

我已经读到某些字符已被编码，然后在提交请求之前由 Angular 再次解码（即 \、/、.）。因此，上例中 text 变量的值无效。

一种解决方案是手动创建正则表达式语句并在提交请求之前使用它对字符串进行编码，然后在 API 中对字符串进行解码。

我想避免这种情况，所以我想知道是否有两种可能：

1. 是否有任何用于编码字符串的 Javascript、Typescript 或 Angular 功能（如上所述）以在 URI 中使用？

2. 有什么方法可以让我从 Slim 版本 4 中的 GET 请求中访问以 ?text={text} 格式提供的参数的值？

编辑：

我还在 Angular 中使用自定义提供程序以 ?auth=[my_token_here] 格式附加身份验证令牌作为 URL 参数。令牌附加到 Angular 发送的每个请求。自定义提供程序使用以下代码附加参数：

intercept(req: HttpRequest<any>,next: HttpHandler) {
  return this.authService.user.pipe(take(1),exhaustMap(user => {
    if(!user) {
      return next.handle(req);
    }
    const modifiedReq = req.clone({
      params: new HttpParams().set('auth',user.token)
    });
    return next.handle(modifiedReq);
  }));
}

我已经研究出如何从 Slim API 中读取 'auth' 的值。但是，当我修改 get 请求以将 text 变量添加为参数时，该参数从未提交并且 Slim API 仍然只看到 auth 参数。修改后的代码如下：

myObservable = this.http.get<MyResponseObject[]>(
  'http://localhost:8080/ngrams/',{
  params: new HttpParams().set('text',text)
}).pipe(catchError(this.handleError));

所以这里没有错误，但是'text'参数永远不会附加到URL（当我提交请求时检查浏览器的网络选项卡时，我只能看到auth参数）。

我是一个 Angular 菜鸟，所以这个逻辑可能有缺陷，但上面的身份验证代码是从教程中复制的。我的想法是，在身份验证提供程序中分配 new HttpParams() 可能会覆盖我为获取请求设置的参数。

当我手动或使用Postman创建相同的请求时，所以我本地环境中的URL为http://localhost:8080/api/?text=some text goes here，那么我可以使用$req->getQueryParams()方法成功检索到参数。

解决方法

根据Slim 4 documentation：

您可以使用 getQueryParams() 在 Request 对象上以关联数组的形式获取查询参数。

这是一个例子：

$app->get('/api',function($request,$response,$args){
    $response->getBody()->write('<pre>' . print_r($request->getQueryParams(),1) . '</pre>');
    return $response;
});

$app->run();

如果您访问 /api?text=special chars %3A%20 \ %2F %3F %25 %26 ^ %23，结果是：

Array
(
    [text] => special chars :  \ / ? % & ^ #
)

,

根据 Nima 的回答，使用 getQueryParams() 时，Slim API 正确读取了这些值。问题是参数没有首先发送。

问题是我的身份验证服务正在为 http 请求分配一个新的 HttpParams 对象，它应该向现有参数集添加一个身份验证令牌。

此问题已通过更新问题中提到的 intercept() 方法解决，以便将 auth 令牌附加到请求的现有 params 属性：

intercept(req: HttpRequest<any>,next: HttpHandler) {
  return this.authService.user.pipe(take(1),exhaustMap(user => {
    if(!user) {
      return next.handle(req);
    }
    const modifiedReq = req.clone({
      params: req.params.set('auth',user.token)
    });
    return next.handle(modifiedReq);
  }));
}