Angular route to server but apply token headers through interceptor

Question

In my Angular routing, I want to add a route for serving authenticated files from the backend:

{ path: 'files/:id/:name', pathMatch: 'full', ??? }

I already have an HTTP interceptor which adds the token headers to other requests. What I want to achieve is simply that the (existing) interceptor adds the token headers, then passes the request on to the server.

(The server will then validate the authentication headers and e.g. return an image. The response will have no additional headers, the result will just be a plain image. Example: "files/1337/logo.svg".)

I don't need a component for that, do I? How can I achieve that in the simplest way?

Thanks for your help!

Answer 1

If a user navigates to a route you have defined in Angular, there is no request submitted to the server. The Angular router reacts to the url change and loads your component inside the router-outlet. You could create a component that reads the variable part of your url and then request the image from an API.

To do that, inject the class ActivatedRoute into your component and use either params or paramMap to retrieve the parameter. Inside the subscribe block you can use the HttpClient to call your API.

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {


    constructor(private readonly route: ActivatedRoute) {
        this.route.params.subscribe((params: Params) => {
         
        });
        this.route.paramMap.subscribe((paramMap: ParamMap) => {
          
        });
    }

    ngOnInit(): void {
    }

}

As your images are secured you probably want to fetch them as a 'blob' and then load them into an img tag. Look at this question