Why Interceptors for authentication tokens in Angular? - Purpose & Use Cases

The Big Idea

What if you could secure every server call with one simple piece of code?

The Scenario

Imagine you have to add your login token to every single request manually in your Angular app. You open each service, find every HTTP call, and add the token header by hand.

The Problem

This manual method is slow and error-prone. You might forget to add the token somewhere, causing requests to fail. It's also hard to update the token logic later because you have to change many places.

The Solution

Angular interceptors automatically add authentication tokens to all outgoing HTTP requests. You write the logic once, and it runs everywhere, keeping your code clean and consistent.

Before vs After

✗ Before

http.get(url, { headers: { Authorization: 'Bearer ' + token } })

✓ After

intercept(req, next) { const cloned = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); return next.handle(cloned); }

What It Enables

This lets you secure all your API calls effortlessly and update token handling in one place, improving security and maintainability.

Real Life Example

Think of a shopping app where every request to the server needs your login token. Using interceptors, the app automatically adds your token, so you stay logged in without interruptions.

Key Takeaways

Manually adding tokens is repetitive and risky.

Interceptors automate token addition for all requests.

This improves security, reduces bugs, and simplifies updates.