Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Caught in the Middle! A story of HTTPModule and Interceptors

Caught in the Middle! A story of HTTPModule and Interceptors

A presentation highlighting the benefits of migrating applications to leverage the power of HTTPClient Module over HTTP Api and HTTP Module for legacy enterprise scale applications.

Additionally, it is connected to a repo you can download, to play with GraphQL, ApolloClient, Lazy Loading in Angular, Authentication Guards and HTTP Interceptors.

GraphQL/Express Server: https://github.com/anfibiacreativa/myapp-server
Apollo Client: https://github.com/anfibiacreativa/myapp-apollo-interceptors

Natalia Venditto

May 27, 2019
Tweet

More Decks by Natalia Venditto

Other Decks in Technology

Transcript

  1. Natalia Venditto @ ngVikings Copenhagen 2019
    Caught in
    The Middle!
    Photo by Alexandre Debiève on Unsplash

    View Slide

  2. Photo by Annie Spratt on Unsplash
    Photo by Hello I'm Nik on Unsplash
    Build us a very
    large app!
    It connects to
    Many apis!

    View Slide

  3. View Slide

  4. Content Policies: Structure
    v2.0.0 v2.1.2 v2.2.4 v2.3.1 v2.4.3 v4.0.0 v5.2.2
    https://github.com/angular/angular/blob
    /master/CHANGELOG.md

    View Slide

  5. View Slide

  6. View Slide

  7. Hello?
    Can I have some
    data, pls?
    The typical HTTP over TCP/IP request/response thingy.

    View Slide

  8. Ack! What’s your
    Exact request?
    The typical HTTP over TCP/IP request/response thingy.

    View Slide

  9. Let me see,...
    We have some
    options...
    The typical HTTP over TCP/IP request/response thingy.

    View Slide

  10. I can allow for
    that only if
    you give me the
    headsup
    The typical HTTP over TCP/IP request/response thingy.

    View Slide

  11. What about a…
    Errm, some csrf
    token, a few cookies
    Aaaand, this
    credentials
    The typical HTTP over TCP/IP request/response thingy.

    View Slide

  12. The typical HTTP request thingy.
    CoOL!
    You can now
    Get what you
    Pinged for!

    View Slide

  13. Life BEFORE
    the HTTPClient
    Module

    View Slide

  14. View Slide

  15. Life WITH
    the HTTPClient
    Module
    Mild-Panic Emoji by @cassidoo

    View Slide

  16. TOKENS
    HTTPClient Module perks ...
    ■ Typed req/res
    ■ Observable based API’s
    ■ Streamlined error handling
    ■ Event progress
    ■ Req/Res Interceptors

    View Slide

  17. Photo by Annie Spratt on Unsplash
    Photo by Chris Moore on Unsplash
    Interceptors____

    View Slide

  18. TOKENS
    Interceptors...
    ■ Must be provided in the root
    module
    ■ Get executed in the order
    provided

    View Slide

  19. View Slide

  20. Interceptor 1
    Interceptor 2
    Interceptor N
    Interceptor N
    Interceptor 2
    Interceptor 1
    Request
    Response

    View Slide

  21. TOKENS
    Interceptors use cases...
    ■ Caching and logging data
    Catching errors
    ■ Implementing authentication

    View Slide

  22. Photo by Annie Spratt on Unsplash
    Photo by Keegan Houser on Unsplash
    JWTokens____

    View Slide

  23. TOKENS
    Types of tokens
    ■ XSRF (CSRF) Token
    ■ Session validation token
    ■ XYZ API Key… etc.

    View Slide

  24. TOKENS
    Usually these tokens...
    ■ Expire after each use
    in an idempotent request
    ■ Must travel back and forth
    with each request

    View Slide

  25. Photo by Annie Spratt on Unsplash
    Photo by Thierry Chabot on Unsplash
    RouteGuards___
    _

    View Slide

  26. TOKENS
    Route Guards...
    ■ CanActivate
    ■ CanactivateChild
    ■ CanDeactivate
    ■ CanLoad
    ■ Resolve

    View Slide

  27. TOKENS
    $ code .

    View Slide

  28. Thank you!
    @anfibiacreativa
    All images are from unsplash.com
    Including all cats (By several authors)
    https://unsplash.com/search/photos/kitten
    Gifs by Tenor
    https://tenor.com
    Learn more at
    https://github.com/anfibiacreativa/myapp-apollo-interceptors

    View Slide