_ STACKBLITZ #00_STACKBLITZ

angular-6-examples.txt

https://stackblitz.com/edit/angular-6-examples

angular-6-lazy-loading.txt

https://stackblitz.com/edit/angular-6-lazy-loading

angular-6-material-start.txt

https://stackblitz.com/edit/angular-6-material-start

angular-6-preloading-strategy.txt

https://stackblitz.com/edit/angular-6-preloading-strategy

angular-7-interseptor.txt

https://stackblitz.com/edit/angular-7-loader-interceptor

angular-7-webworker.txt

https://stackblitz.com/edit/angular-7-webworker

angular-9-dragula-drag-drop

https://stackblitz.com/edit/angular-9-dragula-drag-drop

angular-9-httpClient.txt

https://stackblitz.com/edit/angular-9-httpclient

angular-9-material-sidenav-assets-backend.txt

https://stackblitz.com/edit/angular-9-material-sidenav-assets-backend

angular-9-ngtemplateoutlet.txt

https://stackblitz.com/edit/angular-9-ngtemplateoutlet

AUTH---+++angular-9-jwt-auth0

https://stackblitz.com/edit/angular-9-jwt-auth0

import { JwtHelperService } from '@auth0/angular-jwt';

  this.decodedToken = this.helper.decodeToken(tkn);
  this.expirationDate = this.helper.getTokenExpirationDate(tkn);
  this.isExpired = this.helper.isTokenExpired(tkn);

https://jwt.io/

https://codex.so/jwt

  Header
    Обычно заголовок состоит из двух полей: типа токена (в данном случае JWT) и алгоритма хэширования подписи:

    {
      "typ": "JWT",
      "alg": "HS256"
    }

  Официальный сайт jwt.io предлагает два алгоритма хэширования: HS256 и RS256.
  Но на деле можно использовать любой алгоритм с приватным ключом.

  Payload
    Payload — это любые данные, которые вы хотите передать в токене. Но стандарт предусматривает несколько зарезервированных полей:

    iss — (issuer) издатель токена
    sub — (subject) "тема", назначение токена
    aud — (audience) аудитория, получатели токена
    exp — (expire time) срок действия токена
    iat — (issued at) время создания токена
    nbf — (not before) срок, до которого токен не действителен
    jti — (JWT id) идентификатор токена

    {
      "iss": "Codex Team",
      "sub": "auth",
      "exp": 1505467756869,
      "iat": 1505467152069,
      "user": 1

  Сначала header и payload приводятся к формату JSON, а затем переводятся в base64

  Затем, две эти строки соединяются через точку и хэшируются указанным в header алгоритмом.
    Допустим, пользователь использует пароль password
    Результат работы алгоритма и есть подпись.

  Теперь осталось только сформировать сам токен, для этого нужно через точку соединить header и payload в base64 и подпись

  Аутентификация
    После первого логина, клиенту возвращается сгенерированный сервером JWT.
    При каждом следующем запросе, клиент должен передавать JWT установленным API способом (например, через заголовок или как параметр запроса).
    Сервер декодирует header и payload и проверяет зарезервированные поля.
    Если все в порядке, по указанному в header алгоритму составляется подпись.
    Если полученная подпись совпадает с переданной, пользователя авторизуют.

В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:
  btoa() - Функция btoa() создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.
  atob() - Функция atob() декодирует Base64-кодированную строку.

var obj = {a: 'a', b: 'b'};
var encoded = btoa(JSON.stringify(obj))
var actual = JSON.parse(atob(encoded))

AUTH---++angular-8-JWT-auth.txt

https://stackblitz.com/edit/angular-8-jwt-auth-example

AUTH---angular-7-auth.txt

https://stackblitz.com/edit/angular-7-reg-login-example

AUTH---angular-9-auth-module.txt

https://stackblitz.com/edit/angular-9-auth-module

CACHE---angular-9-cache-service-with-rxjs

https://stackblitz.com/edit/angular-9-cache-service-with-rxjs

CACHE---angular-9-cache.txt

https://stackblitz.com/edit/angular-9-cache

FORMS---angular-5-validate-dynamic-formarray-formgroup.txt

https://stackblitz.com/edit/angular-5-validate-dynamic-formarray-formgroup

FORMS---angular-7-reactive-forms-dynamic-validation.txt

https://stackblitz.com/edit/angular-7-reactive-forms-dynamic-validation

FORMS---angular-8-dynamic-field-validation.txt

https://stackblitz.com/edit/angular-8-dynamic-field-validation

FORMS---angular-8-dynamic-validation-messages.txt

https://stackblitz.com/edit/angular-8-dynamic-validation-messages

ROUTING---angular-7-query-params.txt

https://stackblitz.com/edit/angular-7-navigate-with-query-params

ROUTING---angular-7-resolve.txt

https://stackblitz.com/edit/angular-7-route-resolve

ROUTING---angular-9-navigationEnd.txt

https://stackblitz.com/edit/angular-9-router-even-navigationend

ROUTING---angular-9-routing.txt

https://stackblitz.com/edit/routing-angular