maksymgrom / ng-blog Goto Github PK

Добрый день!
Будет ли в этом курсе разработка библиотеки компонентов?

Каркас должен базироваться на grid
Должн быть шаблон
heade header
nav main
footer footer

Nav включает меню навигации по сайту (не в этой задаче)
header включает элементы управления аккаунтом и дейстия по сайту, а также лого (не в этой задаче)
footer включает справочную информацию по сайту

• Реализовать Guard для защиты ссылок
• Загружать модуль только если можно зайти по ссылке
• Реализовать lasy frontend
• Реализовать lasy login
• Реализовать lasy admin

• Если пользователь авторизован и пытается зайти на страницу admin/auth/login
  то перенаправить на /admin/dashboard

• Если пользователь не авторизован и пытается зайти на страницу для которой требуется авторизация
  то перенаправить на /admin/auth/login

• Если пользователь разлогинился
  то перенаправить на /admin/auth/login

• Если пользователь залогинился
  то перенаправить на /admin/dashboard

Для оптимизации загрузки компонентов их необходимо изолировать в независимые модули
Такие модули будут называться blocks (widgets в одном из моих видео на канале). Это соответствует БЭМ методологии и соответствует подходам Magento при оргинизации фронтенда

Блок - изолированный набор функционала

Angular оптимальным образом загружает используемые компоненты по средством ленивой загрузки модулей.

Material ui изолирует свои компоненты в независимых модулях

https://ngrx.io/guide/store
effects
router
devtools

За минуту до устаревания востановить

FIleUploader ядро

npm install --save @auth0/angular-jwt

JwtModule.forRoot({...})
JwtHelperService

Схема проектеа

• Отправляем login / password и получаем accessToken
• accessToken - для запросов на сайт и генерации нового accessToken
• accessToken - живет Х минут (сейчас это 15 минут)
• до тех пор пока открыт сайт, accessToken не должен устаревать. Т.е. нужно его обновлять каждые Х - 1 мин (14 мин)
  сделаем в след задаче
• время жизни токена зашифровано в JWT и мы его можем извлечь при получении токена

1. Пользователь остается авторизованным

• Открыть сайт
• Успешно авторизоваться
• Проверить что данные пользователя могут быть получены
• Перезагрузить вкладку
• Проверить что данные пользователя могут быть получены

2. Все вкладки синхронизированны

• Открыть сайт в 2х вкладках браузера
• Авторизоваться в первой
• Проверить что в первой вкладке данные пользователя могут быть получены
• Проверить что во второй вкладке данные пользователя могут быть получены

Использовать реактивные формы
Обеспечить вывод ошибки
Поля login / password обязательны для заполнения
Добавить ошибку на всей форме при неправильных доступах

текущее состояние интерфейса и начального состояния initialState

export interface AdminAuthState {
  loading: boolean;
  loaded: boolean;
  serverError: string;
  authData?: AuthData;
}

const initialState: AdminAuthState = {
  loaded: true,
  loading: false,
  serverError: ''
};

это порождает несколько конфликтов типов в строгом режиме при сбросе значений authData.

предлагаемый вариант (с соответствующими изменеями экшенов)

export interface AdminAuthState {
  loading: boolean;
  loaded: boolean;
  serverError: string;
  authData: AuthData | null;
}

const initialState: AdminAuthState = {
  loading: false,
  loaded: true,
  serverError: '',
  authData: null
};

export const adminAuthReducer = createReducer(
  initialState,
  on(login, state => ({
    ...state,
    loading: true
  })),
  on(loginSuccess, (state, {authData}) => ({
    ...state,
    authData,
    loading: false,
    loaded: true,
    serverError: ''
  })),
  on(loginFailed, (state, {serverError}) => ({
    ...state,
    authData: null,
    loading: false,
    loaded: true,
    serverError
  })),
  on(logoutSuccess, () => ({
    ...initialState
  }))
);

При включенном строгом режиме (версия ангулар 10+) конструкция

(admin-login-block.component.html)

<app-admin-login-form-ui
  [formError]="serverError$ | async"
  (login)="onLogin($event)"
></app-admin-login-form-ui>

порождает ошибку типов

Это ошибка проверок TypeScript, на функционал не влияет и не отображается при старых настройках tsconfig
Воспроизвести ошибку можно, включив строгий режим в соответствии с рекомендациями ангулар 10+

Пока что "убрал" ее через дополнительную обертку с проверкой:

<ng-container *ngIf="serverError$ | async; let err">
  <app-admin-login-form-ui
    [formError]="err"
    (login)="onLogin($event)"
  ></app-admin-login-form-ui>
</ng-container>

Минусы:

• дополнительная обертка и проверка
• в initialState поле serverError не должно быть пустой строкой (для ngIf это falsy значение), а пробелом serverError: ' '

Admin Auth State
loading: bool
loaded: bool
serverError: string
authData: {
accessTocken: string,
//id: number,
//exp: number,
//iat: number
}

Actions:

login
loginSuccess
logginFailed

Запросить данные с сервера и сохранить JWT в хранилище или ошибку авторизации

Критерии выполнения (Definition Of Done (DOD))

• - Классы модуля переводов инкапсулированы в отдельном модуле
• - Достаточно подключить в AppModule один модуль чтобы все стало работать
• - Переводы храняться в assets/i18n/en.json
• - Добавлена заготовка для ru / en локализаций
• - Реализован компонент переключения доступных локалей
• - Доступные локали добавляются через файл конфигураций

Можно будет сделать только для фронтенд авторизации
Задача зависима от FE реализации

Даже при успешной авторизации ссылка http://localhost:3000/auth/profile
вернет 401. И ссылка для востановления токена тоже требует валидный access токен. Необходимо доработать приложение так, чтобы при авторизации такие ссылки становились доступные

• Добавить Material IO https://material.angular.io/guide/getting-started

• Выполнить проверку успешного добавления из туториала по ссылке

Добрый день!
Может быть не совсем по теме, так что если не ответите - пойму.
Например, я хочу разделить проект на несколько приложений. Т.е - есть корневой проект Angular - Apps и в нем три приложения Angular: блог - App1, админ - App2, прочее - App3. При этом, App1 сразу загружается при заходе на сайт, а App2 и App3, только в тот момент, когда нажал соответствующую кнопку главного меню, пусть - "Админ" и "Прочее". Т.е - главное меню служит для перехода между приложениями (App1, App2, App3) , а внутри каждого приложения свое "локальное" меню.
Вопрос: как строить навигацию между приложениями и какова "примерно" архитектура такого проекта (может быть нужно делать классический проект на HTML с тремя страницами (Блог, Админ, Прочее), а уже в каждую из этих страниц HTML встраивать соответствующее приложение Angular?)
Цель: пытаюсь понять, как разделить проект и тем самым уменьшить объем загрузки?. Спасибо :-)