向我的 Angular APP Http Post 请求添加授权标头答案

【问题标题】：Adding Authotization Headers to My Angular APP Http Post Request向我的 Angular APP Http Post 请求添加授权标头
【发布时间】：2019-01-10 21:05:06
【问题描述】：

我想向 Post 请求添加授权标头在网上进行了大量研究并尝试了所有可能的向请求添加标头的方法之后，我仍然无法实现我需要向 Django 服务器验证我的 Angular 应用程序的发布请求

headers2 = {
    "Content-Type": "application/json",
    "Authorization": "JWT " + token
}
json_data = json.dumps({"content":" content nice content"})
posted_response = requests.post(ENDPOINT, data=json_data, headers=headers2)

当我触发此代码时，它运行得非常好，并使用 python 请求将其添加到我的数据库中我假设该过程对于 Angular 也是相同的，并将授权标头直接添加到 http post 请求的标头

createPost(input:HTMLInputElement){
    // input.value='';
    let post={content:input.value};
    let head = new Headers({ 'Content-Type': 'application/json',
    // 'Authorization': "JWT"+'Bearer '+localStorage.getItem("token")
    "Authorization": "JWT " + localStorage.getItem("token")

  });
    let requestOptions = new RequestOptions({headers: head});
    let body = JSON.stringify(post);

    this.http.post(this.url,body,requestOptions)
      .subscribe(response =>{
        post['id']=response.json().id;
        this.posts.splice(0,0,post);


      });

令牌值存储在本地存储中

但是没用所以在爬过谷歌之后，我开始了解 Http 拦截器创建了一个服务并尝试向它们添加授权

@Injectable({
  providedIn: 'root'
})
export class AuthoService  implements HttpInterceptor {

  constructor() { }
  intercept(req,next){
    let tokenizedReq =req.clone({
      setHeaders:{
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
    return next.handle(tokenizedReq)


  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   let ok = JSON.parse(localStorage.getItem('token'));

    req = req.clone({

      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        // 'Authorization': "JWT" + `Bearer ${localStorage.getItem('token')}`
        'Authorization': "JWT" + `Bearer ${ok.token}`

      }
    });

    return next.handle(req);
  }
}

尝试了最好的方法，但仍然没有用所以我想我可能在某个地方做错了所以决定从头开始学习http拦截器的东西

我按照这个教程 https://www.youtube.com/watch?v=UrfhqE7I-3o

我按照他告诉我的每一步添加标题应我的要求

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor{

  constructor() { }
intercept(req,next){

  let tokenizedreq=req.clone({

    setHeaders:{
      Authorization:'Bearer xx.yy.zz'
    }

  })
  return next.handle(tokenizedreq)
}


}

并添加它 app.modules.ts

providers: [CourseService,AuthService,
    {
      provide : HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi   : true,
    }],

但我仍然不明白问题是什么以及为什么我的请求中没有授权标头任何形式的帮助表示赞赏

【问题讨论】：

可以添加控制台日志吗？

标签： django angular django-rest-framework http-headers

【解决方案1】：

这是一个在 Angular 中使用授权的示例代码，当后端是 django 时。希望对你有帮助。

如果您使用 JWT django 框架进行身份验证，您可以在 Angular 中这样做：

createComment(aComment: any){
    let url = this.mainUrl + '/api/comment/create/?format=json';
    let headers = new Headers();

    if(localStorage.getItem('token') !== ''){
      headers = new Headers({ 'Authorization': 'JWT ' +localStorage.getItem('token') });
    }else{
      headers = new Headers({});
    }
    let options = new RequestOptions({ headers: headers });

    return this.http.post(url, aComment, options)
      .map(
        (response: Response) => {
          const data = response.json();
          return data;
        }
      )
      .catch(
        (error: Response) => {
          let rr = error.json();
          return Observable.throw(rr.errorMessage);
        }
      );
  }
}

在 django 中你可以这样做：

class CommentCreateAPIView(CreateAPIView):

    serializer_class = serializers.CommentCreateSerializer
    permission_classes = (permissions.IsAuthenticated, )

    queryset = Comment.objects.all()

【讨论】：