JSON Web Tokens (JWT) in Angular are a widely used standard for securely transmitting information between parties as a JSON object. They are commonly employed in Angular applications to handle authentication and authorization.
Understanding JWT
As highlighted in the provided reference, JSON Web Tokens (JWT) provide the best security and authentication. They are a fundamental part of modern web security workflows, particularly when dealing with single-page applications like those built with Angular.
A JWT is a compact, URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure. This allows the claims to be digitally signed or integrity protected with a Message Authentication Code (MAC) and/or encrypted.
Structure of a JWT
A typical signed JWT consists of three parts, separated by dots (.):
- Header: Contains information about the token type (JWT) and the signing algorithm being used (e.g., HS256, RS256).
- Payload: Contains the claims (statements about an entity, typically the user, and additional data). Common claims include user ID, username, roles, expiry time, etc.
- Signature: Created by taking the encoded header, the encoded payload, a secret key, and the algorithm specified in the header, and signing it. This is used to verify that the sender of the JWT is who it says it is and to ensure that the message wasn't altered along the way.
header.payload.signatureJWT in the Context of Angular
Angular is a widely used JavaScript platform for building client-side applications. When building secure Angular applications that interact with a backend API, managing user sessions and controlling access to resources is crucial. This is where JWTs play a significant role.
In an Angular application, JWTs are typically used for:
- Authentication: After a user successfully logs in, the backend server generates a JWT containing user-specific claims and sends it back to the Angular client. The Angular application stores this token (e.g., in
localStorageorsessionStorage). - Authenticated Routing: As mentioned in the reference, JWTs are key to implementing authenticated routings in Angular. This involves using the presence and validity of the stored token to decide whether a user is allowed to access certain routes or pages in the application. Route guards in Angular are commonly used for this purpose.
- Passing Tokens to Servers: The Angular application needs to pass tokens to servers in client side when making requests to protected API endpoints. The JWT is usually included in the
Authorizationheader of the HTTP requests, typically prefixed withBearer. The backend server can then validate the token to authenticate the user and authorize the request. - Token Management: This involves handling the lifecycle of the token on the client side, including storing, retrieving, checking for expiry, and potentially handling token refresh if the backend supports it.
Workflow Example
- User enters credentials in an Angular login form.
- Angular sends login credentials to the backend API.
- Backend verifies credentials and, if valid, generates a JWT and sends it back.
- Angular receives the JWT and stores it securely (e.g.,
localStorage). - When the user navigates to a protected route, an Angular route guard checks for the presence and validity of the stored JWT. If valid, access is granted.
- When the Angular app makes a request to a protected API endpoint, it retrieves the stored JWT and adds it to the
Authorization: Bearer <token>header of the HTTP request. - The backend server receives the request, validates the JWT, identifies the user, checks their permissions, and processes the request if authorized.
Utilizing JWTs simplifies the process of maintaining session state and handling authorization checks between the Angular frontend and the backend, providing a stateless, scalable, and secure approach.
