将身份验证令牌传递给自定义 Angular 7 库

Question

I need to create a custom Angular 7 library that is able to take in an authorization token from its application so it can use the same authorization token as the rest of the application to access certain APIs. I looked into injecting the authorization token through the library's forRoot() in the app.module.ts, but the authorization token is not available when the app is bootstrapped.

Are there any suggestions on how to accomplish this? In short, I need a way for the custom library to take in an authorization token so that is ready whenever the API is used during runtime.

Answer 1

In my angular application, I simply use an interceptor to read the JWT token and use it on HTTP/HTTPS request.

import {Injectable} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';

import {Observable} from 'rxjs';
import {AuthService} from '../services/auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor(public service: AuthService) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        if (this.service.isAuthenticated()) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${this.service.token}`
                }
            });
        }
        return next.handle(request);
    }
}

I also define the root module in this way:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    AppRoutingModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
  ,
  bootstrap: [AppComponent]
})
export class AppModule {
}

The token is taken at runtime from the service injected in the interceptor. If you need to consult the entire project, you can find it on github .

A possible solution is to delegate at the application interceptor definition the capability to retrieve the JWT token. In this way, all the application calls will be managed in the same way.

Hope this helps.

Answer 2

one possible solution may achieved by using localStorage
by make an agreement on same keyName between angular-app and custom-library which is nice if the user of the library can customize it.

localStorage.setItem('apiData', JSON.stringify(apiDataObject));

const apiDataObject = JSON.parse(localStorage.getItem('apiData'));