0

我有将使用令牌调用的 API。

目前在 Swagger UI 中，我可以使用令牌对这个 api 进行身份验证

例如，如果我在授权框中输入“Token 6ec8f4023d8148209749a1ed972xxxx”

见下文：

授权箱

在右上角，我可以输入上面显示的令牌并进行身份验证

在此处输入图像描述

单击身份验证后，它会显示如下所示的登录：

在此处输入图像描述

现在我可以通过单击执行按钮调用 swagger ui 中列出的 api，我可以看到那里列出的 json 数据。

在此处输入图像描述

我需要通过角度调用上述api，我知道我可以使用角度服务的get函数，

你能证明我应该在标题中添加什么代码吗？

例如：下面没有将令牌放入标头的选项，唯一的选项是用户名和密码。我应该如何传递令牌？

getToken() {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    return this.http.post('http://myapi/api.php/user', {
      username: 'admin',
      password: 'password'
    }, { headers });
  }
4

2 回答 2

1

您可以使用 AngularHeaders设置值：

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

headerName您可以将令牌和价值放在这里。然后在后端，您可以从请求标头中检索值并进行验证。

更好的方法是实现 HTTP 拦截器。创建拦截器并将其添加到您的app.module.ts. 每次发出 HTTP 请求时都会附加令牌。

于 2018-12-18T13:29:01.793 回答
1

最好的方法是实现一个Interceptor： 

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `${this.auth.getToken()}`
      }
    });

    return next.handle(request);
  }
}

拦截器会更改您执行的每个 HTTP 请求。在这种情况下，它添加了 Authorization 标头。

不要忘记在您的 AppModule 中包含拦截器：

  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]

完整的例子在这里

肮脏和快速的方式：

this.http.post('http://myapi/api.php/user', {
      username: 'admin',
      password: 'password'
    }, { headers: new Headers({'Authorization': token}) });
于 2018-12-18T13:29:53.053 回答