Angular

Question

我是 Angular 的新手，目前正在尝试构建前端，同时学习使用 Angular。

我已经构建了一个 test-app，我正在使用我写的 API 实现身份验证。身份验证工作正常，但是我正在努力思考如何实现特定功能。

几乎所有的应用程序都被身份验证锁定。这个想法是：如果用户在未登录的情况下访问应用中的任何页面，应用应将用户重定向到 login-page。所有这些都很棒。

然而 login-page 需要完全不同的布局。登录页面上没有使用“主设计”中的任何设计元素。甚至 body 标签上的 css class 也不一样。

解决这个问题的最佳方法是什么？

我尝试在 app.component.html 文件中做一些 *ngif，但是没有按预期工作。
我也完全不知道如何更改 index.html 中的 body-class。

我希望这是有意义的。

我在下面发布了一些源代码。如果需要更多信息，请告诉我。

app.component.html:

   <ng-container *ngIf="accountService.currentUser$ | async">
        <app-preloader></app-preloader>
        <app-nav></app-nav>
        <app-sidebar></app-sidebar>
    
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->
    
            <!-- Main content -->
            <section class="content">
                <div class="container-fluid">
                    <router-outlet></router-outlet>    
                </div><!-- /.container-fluid -->
            </section>
            <!-- /.content -->
        </div>
        <app-footer></app-footer>
    </ng-container>
    
    <ng-container *ngIf="(accountService.currentUser$ | async) === null">
        <router-outlet></router-outlet>   
    </ng-container>

index.html:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Client</title>
      <base href="/">
      <!-- Google Font: Source Sans Pro -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
      <!-- Ionicons -->
      <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    
    <body class="hold-transition sidebar-mini layout-fixed">
      <app-root></app-root>
    </body>
    </html>

app.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { AuthGuard } from './_guards/auth.guard';

const routes: Routes = [
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    children: [
      {path: '', component: MainComponent},
      {path: 'user', component: UserComponent}
    ]
  },
  {path: 'login', component: LoginComponent},
  {path: '**', component: MainComponent, pathMatch: 'full', canActivate: [AuthGuard]},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

为此，您可以创建布局模块并创建内部和外部布局组件，并在两个组件中添加 <router-outlet></router-outlet>，然后在您的 app-routing.module.ts 文件中创建这样的路由

 {
    path: '',
    component: OutsideLayoutComponent,
    canActivate: [ExternalAuthGuard],
    children: [
      { path: '', loadChildren: './modules/auth/auth.module#AuthModule' },
    ]
  },

  {
    path: '',
    component: InsideLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'ticket', loadChildren: './modules/ticket-retrieval/ticket-retrieval.module#TicketRetrievalModule' }
      { path: 'error', component: GenericErrorPageComponent },
      { path: 'invalid-session', component: InvalidSessionPageComponent },
      { path: 'un-authorized', component: UnAuthorizedComponent }
    ]
  },

您需要创建 AuthGuard，authguard 将根据将用户重定向到特定页面来处理用户是否登录。并根据路线布局进行设置。

NOTE: You must have basic understanding of Angular LazyLoding

Angular - 特定页面上的不同模板结构

Angular - Different template structure on specific page

css

authentication

user-interface