Добавить страницу входа на угловую тему приборной панели

Question

Я использую тему панели инструментов для разработки собственного углового веб-сайта: https://www.creative -tim.com / product / paper-dashboard

Исходное дерево папок выглядит следующим образом:

Тема панели инструментов бумаги содержит основной компонент со следующим html:

<div class="wrapper">
    <div class="main-panel">
        <navbar-cmp></navbar-cmp>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
    <footer-cmp></footer-cmp>
    </div>

    <div class="sidebar" data-color="white" data-active-color="danger">
    <sidebar-cmp></sidebar-cmp>
    </div>
    <div class="main-panel">

    </div>
</div>
<fixedplugin-cmp></fixedplugin-cmp> 

этот компонент будет включать все дочерние компоненты, такие как панель навигации, боковая панель и подстраницы (панель инструментов, userprofile, значки, ...).

маршрутизация приложения представляет собой следующий app.routing.ts:

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  }, {
    path: '',
    component: AdminLayoutComponent,
    children: [
    {
      path: '',
      loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
  }]},
  {
    path: '**',
    redirectTo: 'dashboard'
  }
]

admin-layout.module.tsФайл машинописного текста имеет следующий вид:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AdminLayoutRoutes } from './admin-layout.routing';

import { DashboardComponent }       from '../../pages/dashboard/dashboard.component';
import { UserComponent }            from '../../pages/user/user.component';
import { TypographyComponent }      from '../../pages/typography/typography.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule
  ],
  declarations: [
    DashboardComponent,
    UserComponent,
    UpgradeComponent,
    TypographyComponent,
  ]
})

export class AdminLayoutModule {}

Компонент макета администратора позволяет перемещаться по его подстраницам с помощью файла маршрутизации:

import { Routes } from '@angular/router';

import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { UserComponent } from '../../pages/user/user.component';
import { TypographyComponent } from '../../pages/typography/typography.component';
import { UpgradeComponent } from '../../pages/upgrade/upgrade.component';

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'user',           component: UserComponent },
    { path: 'typography',     component: TypographyComponent },
    { path: 'upgrade',        component: UpgradeComponent }
];

Моя цель - добавить страницу входа, которая разрешает безопасный доступ к моемуВеб-сайт.

Я добавил компонент входа в систему и изменил файл app.routing.ts, чтобы он стал:

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { LoginComponent } from './admin/login/login.component';

export const AppRoutes: Routes = [
  {
      path: '',
      component: LoginComponent,
  },
]

Этот модификатор позволяет открыть страницу входа в качестве первой страницы:

затем я добавляю к кнопке входа событие (щелчка): login:

<button type="submit" class="btn btn-primary btn-round" (click)="login()">login</button>

login () - это функция скрипта типа, которую я разработалin login.component.ts:

login(){
    /*
        validate username and password with backend
    */
    ....

    /*
    navigate to admin layout subpages in case username and password are validate
    */
    if(username and password are validated) 
        this.router.navigate(['AdminLayoutComponent']); 
}

Мой вопрос сейчас заключается в том, как мне изменить функцию login () и файлы маршрутизации, чтобы я мог получить доступ к своим основным страницам макета администратора после нажатия кнопки входа в систему?

Answer 1

Вы можете использовать средства защиты маршрута, чтобы запретить доступ к страницам без входа в систему. Есть несколько типов охранников маршрута, таких как

CanActivate
CanActivateChild
CanDeactivate
CanLoad
Resolve

Подробнее об этом можно узнать в https://angular.io/guide/router

Для входа в систему я не знаю, что возвращает ваш бэкэнд. Если это аутентификация на основе токенов, после возврата токена из бэкэнда вы можете сохранить токен в локальном хранилище. Затем, прежде чем активировать дочерний элемент, вы можете написать функцию, которая проверит действительность токена и вернет true, если токен установлен. Затем вы можете добавить функцию в CanActivate guard of the router.

Поскольку ваш вопрос слишком широк, чтобы ответить, я предлагаю вам прочитать несколько блогов по этому поводу - https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3 https://www.techiediaries.com/angular-jwt/ https://blog.angular -university.io / angular-jwt-authentication /