Implementing Bearer Token Authorization Headers in Angular 5 with HttpInterceptor

Problem Context and Error Analysis

In Angular 5 applications, implementing Bearer Token-based authentication often leads to 403 Forbidden errors and type incompatibility issues. The original code example illustrates a typical approach:

getUserList(): Observable<UserList[]> {
  const headers = new Headers();
  let tokenParse = JSON.parse(this.token);
  headers.append('Authorization', `Bearer ${tokenParse}`);
  const opts = new RequestOptions({ headers: headers });
  return this.http.get<UserList[]>(this.mainUrl, opts)
    .catch(this.handleError.handleError);
}

While this code generates a correct Authorization header, it suffers from two key problems: first, the console shows a 403 Forbidden error, indicating server rejection; second, the TypeScript compiler reports type mismatch because RequestOptions is incompatible with HttpClient expectations.

Core Solution: Applying HttpInterceptor

Based on the best answer, using HttpInterceptor is a more elegant solution. This method automatically adds authorization headers by intercepting all HTTP requests, avoiding code duplication. Implementation steps include:

1. Create an interceptor class: Implement the HttpInterceptor interface and override the intercept method.
2. Inject the token: Retrieve the authentication token from storage (e.g., localStorage or a service).
3. Set headers: Add Authorization: Bearer <token> to the request headers.
4. Register the interceptor: Provide the interceptor in the module's providers array.

Example code:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any> {
    const token = localStorage.getItem('authToken');
    if (token) {
      const cloned = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(cloned);
    }
    return next.handle(req);
  }
}

Registration in the module:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

Type Safety and Modular Design

The type error in the original code stems from using incompatible Headers and RequestOptions classes from the legacy @angular/http module. Angular 5 introduced the @angular/common/http module, offering more type-safe HttpClient and HttpHeaders. The correct approach is:

import { HttpClient, HttpHeaders } from '@angular/common/http';

getUserList(): Observable<UserList[]> {
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${JSON.parse(this.token)}`
  });
  return this.http.get<UserList[]>(this.mainUrl, { headers });
}

This method avoids type mismatches and enhances code maintainability.

Error Handling and Debugging Strategies

403 Forbidden errors typically indicate invalid, expired, or insufficiently privileged tokens. Recommended debugging steps include:

• Verify token format: Ensure it is a valid JWT or server-expected format.
• Check server configuration: Confirm the server correctly validates Bearer Tokens.
• Use browser developer tools: Inspect network request headers to verify the Authorization header is sent correctly.
• Implement error interceptors: Extend HttpInterceptor to handle authentication errors, such as redirecting to a login page.

Example error interceptor:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any> {
  return next.handle(req).pipe(
    catchError(error => {
      if (error.status === 403) {
        // Handle authentication failure, e.g., clear token and redirect
        localStorage.removeItem('authToken');
        this.router.navigate(['/login']);
      }
      return throwError(error);
    })
  );
}

Comparison and Best Practices Summary

Compared to traditional manual header addition, HttpInterceptor offers these advantages:

• Code reusability: Avoids repeating header setup in every HTTP request.
• Centralized management: All authentication logic resides in one place, easing maintenance and updates.
• Extensibility: Easily add other features like error handling, logging, or caching.
• Type safety: Leverages Angular's modern HTTP module to reduce runtime errors.

Drawing from supplementary answers, it is recommended to always use the @angular/common/http module and consider storing tokens in secure locations (e.g., localStorage or sessionStorage). For production environments, implement token refresh mechanisms and CSRF protection.

Conclusion

Implementing Bearer Token authorization in Angular 5 with HttpInterceptor is an efficient and type-safe approach. By intercepting all HTTP requests to automatically add Authorization headers, developers can avoid common 403 errors and type mismatch issues while enhancing code modularity and maintainability. Combined with proper error handling and debugging strategies, this enables the construction of robust authentication systems tailored to modern web application security needs.