Adding Authotization Headers to My Angular APP Http Post Request

Question

I want to add Authorization Headers to a Post request after researching a lot over the web and trying all possible ways of adding headers to a request i still couldn't make it happen i need to authenticate the post request of my angular app to django server

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)

when i fired this code it's running perfectly fine and adding it my data base using python requests i assumed the process would be same for angular as well and added authorization headers directly to the headers of http post request

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


      });

the token value is stored in localstorage

but it didn't work so after crawling over google and all i came to know about Http Interceptors created a service and tried to add the authorization to them

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

Tried the best ways possible but still its of no use so i assumed i might have done somewhere wrong so decided to learn the http Interceptor stuff from scratch

I followed this tutorial https://www.youtube.com/watch?v=UrfhqE7I-3o

i followed each and every step he told me to do so for adding headers to my reuqest

@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)
}


}

and added it app.modules.ts

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

but still i don't understand what the issue is and why authorization headers aren't in my request any kind of help is appreciated

Mohammad Ali Mohammad Ali · Accepted Answer · 2018-08-03T08:15:59

This is a sample code for using authorization in angular, when backend is django. I hope it help you.

If you are using JWT django framework for authentication, you can do like this in 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);
        }
      );
  }
}

and in django you can do just like this :

class CommentCreateAPIView(CreateAPIView):

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

    queryset = Comment.objects.all()

Adding Authotization Headers to My Angular APP Http Post Request

1 Answers