Repository files navigation

ngx-api-utils is a lean library of utilities and helpers to quickly integrate any HTTP API (REST, Ajax, and any other) withAngular.

Inspired by:

• https://github.com/auth0/angular2-jwt
• https://angular.io/guide/http#intercepting-requests-and-responses.

Thanks to the respective developers, people and contributors of:

• Angular 6+
• @angular/cli andit's latest capabilities of creating and maintaining libraries
• local fork of fake-api-jwt-json-server fromhttps://github.com/techiediaries/fake-api-jwt-json-server based on this wonderful articlehttps://www.techiediaries.com/fake-api-jwt-json-server/ and utilizing this awesomehttps://github.com/typicode/json-server
• VS Code

To install the package from npm - runnpm install ngx-api-utils

import{NgxApiUtilsModule}from'ngx-api-utils';@NgModule({  ...imports:[NgxApiUtilsModule,...]  ...})exportclassAppModule{}

The package consists of couple of main services and a module that you would use:

• AuthTokenService to allow you to easily work with any kind of tokens, including but not limited to JWT, Oauth2 with JWT container, etc.
  • which you would provide with a properTokenDecoder
  • you would also like to provide with properTokenPayload by extending it with the properties you have in the token especially if you are usingJWT Token or other that can contain relevant for your application information
  • you might want to provide it with your customTokenStorage implementation especially if you are not happy with the defaultlocalStorage
• ApiHttpService that behaves 100% like Angular'sHttpClient, but helps you by utilizing for you
  • theAuthTokenService internally and sending the token on each request usingApiAuthorizationHeaderInterceptor
  • also allows you to set API base url, by providing where the HTTP API is thanks toAPI_HTTP_BASE_URL
  • also allows you to set default HTTP headers withApiDefaultHeadersInterceptor
  • also only in case needed you can plugApiErrorsInterceptor and read through it the last error
  • or even better - have your own implementation of any interceptor you need - to handle errors, transform results or anything you would the same way you would do for Angular'sHttpClient, just provide it like the defaults are provided withAPI_HTTP_INTERCEPTORS injection token e.g.{provide: API_HTTP_INTERCEPTORS, useClass: YourCoolInterceptor, multi: true} to line up with the rest of the default providedAPI_HTTP_INTERCEPTORS
• ApiAuthGuardService that is a perfectly sane option of you just have public and private part that needs to be protected based onAuthTokenService validity and you want a bit more
  • you can of course configure it with urls forAPI_AUTH_GUARD_URL_FOR_AUTHENTICATED andAPI_AUTH_GUARD_URL_FOR_AUTHENTICATION, also a RegExp forAPI_AUTH_GUARD_PUBLIC_ONLY_ROUTES
• NgxApiUtilsModule that provides a default set of interceptors forAPI_HTTP_INTERCEPTORS used by theApiHttpService which you can configure through providing your own values for the relevant injection tokens

For more details, please check:

• theDemo app (TBD)
• the keyngx-api-utils specs

This repository contains aDemo app (TBD) that is intended to show a bit more complex app and how thengx-api-utils package fits in.

In the demo beside the usage ofngx-api-utils I would strongly recommend checking:

• the overall structure of well organized lazy loaded moduleshttps://github.com/ngx-api-utils/ngx-api-utils/tree/master/src/app though the router configurations
• the overall multi-layout system for the UI (HTML/CSS), that allows you to have different UI layouts for the different app sections (roles)
• the overall way how to organize your services around and build object models that utilize thengx-api-utils (TBD)

The project uses the following things, you should get familiar with:

• @angular/cli's capabilities of creating and maintaining libraries
• local fork of this repositoryhttps://github.com/techiediaries/fake-api-jwt-json-server based on this wonderful articlehttps://www.techiediaries.com/fake-api-jwt-json-server/ and utilizing this awesomehttps://github.com/typicode/json-server
• custom set of scripts that you can checkhttps://github.com/ngx-api-utils/ngx-api-utils/blob/master/package.json#scripts that allows you to:
  • start the Demo app withnpm run start
  • run the whole set of lintersnpm run start
  • run the e2e tests of the Demo appnpm run e2e (TBD)
  • build thengx-api-utils package itself throughnpm run ngx-api-utils:build
  • or run it's unit and integration tests throughnpm run ngx-api-utils:test
  • and more, please do check the scripts

Please feel free to submit PRs for the following things:

• test coverage - unit; integration tests; e2e tests on the demo app;
• demo project - showing the package in action in a bit more advanced architecture of modules and routing, namely public section, customer section, admin section of the app
• demo project fake api - needs updates according to what the demo would show
• contribute further - any additional features and bug fixes

We highly appreciate your contribution!