时间戳

首页 > 解决方案 > 如何以角度添加我在本地存储中的标头令牌

angular - 如何以角度添加我在本地存储中的标头令牌

问题描述

我在我的 auth.service 和 auth.interceptor.ts 代码中有这些方法，以便从标头获取令牌，我想用 post 方法发送它应该在标头中添加什么以设置令牌？任何帮助深表感谢！！

 //shop.service.ts

const httpOptions = {

headers: new HttpHeaders({ 'Content-Type': 'application/json', 
'Authorization': 'X-OBSERVATORY-AUTH'}) 

};

addShop (shop: Shop): Observable<Shop> {

return this.http.post<Shop>(this.shopsUrl, shop, httpOptions);
}


// auth.interceptor.ts

  intercept(req: HttpRequest<any>, next: HttpHandler) {

  const authToken = this.authService.getToken();

  const authRequest = req.clone({

    headers: req.headers.set("Authorization", "Bearer " + authToken)

  });

  return next.handle(authRequest);
}



//auth.service.ts

getToken() {
return this.token;
}


login( username: string,  password: string) {

var user: User = {  username: username, password: password };
this.http 
  .post<any>("http://localhost:3000/observatory/api/login",user, 
   {observe:'response'})
  .subscribe((res) => {
    const token = res.headers.get('X-OBSERVATORY-AUTH');
    console.log(token);
    this.token = token;

    if (token!==null) {

      this.isAuthenticated = true;
      this.userId = res.body._id;
      this.isAdmin=res.body.isAdmin;
      this.userAdmin=res.body.isAdmin;
      this.username=res.body.username;
      this.authStatusListener.next(true);
      this.saveAuthData(token, this.userId,this.username, this.isAdmin);

} });

标签： angulartypescript

解决方案

你快到了。shop.service.ts应该添加标题就好了。做同样的事情auth.service.ts：

this.http.post<any>(url, user, { 
    headers: new HttpHeaders({ 
      'Content-Type': 'application/json', 
      'Authorization': 'X-OBSERVATORY-AUTH'
    }), 
    observe: 'response'
  });

文档：https ://angular.io/guide/http#adding-headers

要在所有（或几乎所有）HTTP 请求上添加标头，请使用 HTTP 拦截器（请参阅@Chenna 的评论）

编辑：

为发布未经测试的代码道歉。请参阅Angular 4/5 HttpClient: Argument of type string is not assignable to 'body'了解以前版本产生错误的原因。简而言之，您需要内联observe或使用一些丑陋的技巧。

或者：使用 HTTP 拦截器。结束你所有的烦恼。

推荐阅读