Calling authorized endpoints in Angular Elements components

[unique slate]

Hi, I have an Angular app which creates some custom elements from components using Angular Elements, which are used in a different app that runs on a different framework.

The reason for this is, is because we want to migrate to Angular. However, some API calls are done in the Angular components. The API is authorized and requires a JWT Bearer.

Now I have the question, what is a good way on developing the Angular app and accessing these protected endpoints, and how would I implement the custom elements to work in the main app (taking the auth in mind)??

I cannot really find anything useful of this on google. Or im bad at searching :L

PS: In the main app, the token is stored in session storage after logging in. I think I can access this in Angular and use it in every http call? But its inaccessible this way when developing the angular app..

Calling authorized endpoints in Angular Elements components

[unique slate]

Bump (does anyone know?)

[hazy haven]

Not very clear what you are trying to do. If you need to make authorized request, you can implement an Interceptor, that append the Jwt Token into Request Header

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.accessToken}`
      }
    });
    return next.handle(request).pipe(
      catchError((err) => {
        /* ... */
        return throwError(err);
      })
    );
  }
}

assuming you want to append the token to every http request

[unique slate]

I am building a single javascript file with components of angular created in it. I can use those elements in a different app. However, those elements have HTTP requests to an API which requires authorization.