CODEWITHSUNDEEP
c#angulartypescriptasp.net-corerxjs
Ameerudheen.K
Ameerudheen.K

Reputation: 667

401 (Unauthorized) request on Angular 7, .netcore application

Iam getting a 401 unauthorized error while authorizing an user to consume an api on .net core and angular 7 application.

My angular service has a function :-

getUserProfile() {
   var tokenHeader = new HttpHeaders({'Authorization':'Bearer ' + localStorage.getItem('token')});
   console.log(tokenHeader)
   return this.http.get('/api/ApplicationUser/UserProfile', { headers: tokenHeader});
}

on tokenHeader I am sending the user jwt token.

My api is 

[HttpGet]
[Authorize]
[Route("UserProfile")]
//'api/userProfile'
public async Task<Object> GetUserProfile()
{
    string userId = User.Claims.First(c => c.Type == "UserID").Value;
    var user = await _userManager.FindByIdAsync(userId);
    return new { user.fullName, user.Email, user.UserName };
}

I have tried some answers from other questions but nothing helps.

Any helps appreciated.

Upvotes: 1

Views: 2898

Answers (2)

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

Can you share your request from network tab. Also I recommend to use interceptors for make it global

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

 private isRefreshing = false;
 private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

 constructor(public authService: AuthService) { }

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

   if (this.authService.getJwtToken()) {
     request = this.addToken(request, this.authService.getJwtToken());
   }

   return next.handle(request).pipe(catchError(error => {
     if (error instanceof HttpErrorResponse && error.status === 401) {
       return this.handle401Error(request, next);
     } else {
       return throwError(error);
     }
   }));
 }

 private addToken(request: HttpRequest<any>, token: string) {
   return request.clone({
     setHeaders: {
       'Authorization': `Bearer ${token}`
     }
   });
 }

 private handle401Error(request: HttpRequest<any>, next: HttpHandler) {
   if (!this.isRefreshing) {
     this.isRefreshing = true;
     this.refreshTokenSubject.next(null);

     return this.authService.refreshToken().pipe(
       switchMap((token: any) => {
         this.isRefreshing = false;
         this.refreshTokenSubject.next(token.jwt);
         return next.handle(this.addToken(request, token.jwt));
       }));

   } else {
     return this.refreshTokenSubject.pipe(
       filter(token => token != null),
       take(1),
       switchMap(jwt => {
         return next.handle(this.addToken(request, jwt));
       }));
   }
 }
}

Full example https://github.com/bartosz-io/jwt-auth-angular/blob/master/src/app/auth/token.interceptor.ts

Upvotes: 0

Tony
Tony

Reputation: 20132

Your code should be like this

const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  })
};

return this.http.get('/api/ApplicationUser/UserProfile', httpOptions);

Also make sure you have this line in your controller

[Authorize(AuthenticationSchemes = "Bearer")]

Upvotes: 2

Related Questions