Question

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

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请求将其添加到我的数据库中我以为角度处理也是如此，因此将授权标头直接添加到http发布请求的标头中

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);


      });

令牌值存储在本地存储中

但是没有用所以在爬过Google之后，我就知道了Http Interceptors 创建了一项服务，并尝试向他们添加授权

@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,
    }],

但是我还是不明白问题是什么，为什么我的请求中没有授权头任何帮助都将受到赞赏

Answer 1

这是在后端为django时在angular中使用授权的示例代码。希望对您有帮助。

如果您正在使用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()

将授权标题添加到我的Angular APP Http发布请求

1 个答案: