How do I implement JWT authentication in an Angular app using Angular CLI?

How do I implement JWT authentication in an Angular app using Angular CLI?

To implement JWT authentication in your Angular app, you can follow these steps: 1. Set up your Angular project using Angular CLI. 2. Create a service for handling authentication. 3. Use HttpClient to send login requests to your backend. 4. Store the JWT token in local storage upon successful login. 5. Add an HTTP interceptor to attach the token to outgoing requests.

What packages do I need to install for JWT implementation?

You will need to install the following packages: 1. @auth0/angular-jwt for handling JWT tokens. 2. @angular/common/http for making HTTP requests. You can install them using npm.

Can you show me an example of the authentication service?

Sure! Here's a simple example of an authentication service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private apiUrl = 'http://yourapi.com/api';

  constructor(private http: HttpClient) {}

  login(credentials: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/login`, credentials);
  }

  // Add other methods like logout, isAuthenticated, etc.
}

How do I protect routes in my Angular app?

To protect routes, you can use route guards. Create an AuthGuard that checks if the user is authenticated before allowing access to certain routes. Implement the canActivate method to return true or false based on the authentication status.