How do I implement authentication tokens in Angular CLI?

How do I implement authentication tokens in Angular CLI?

To implement authentication tokens in Angular CLI, you can use services to manage token storage and HTTP interceptors.

What are HTTP interceptors and how do they work?

HTTP interceptors are services that allow you to intercept and modify HTTP requests and responses. They can be used for adding authentication tokens.

Can you show me a code example of an HTTP interceptor?

Sure! Here's a simple example:

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

This interceptor adds the token to the Authorization header.

How do I register this interceptor in my Angular app?

You can register the interceptor in your app module by providing it in the providers array:

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

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