我是Angular的新手，我正在尝试构建一个前端，同时学习使用Angular。
我已经建立了一个测试应用程序，我正在使用我写的API实现身份验证。身份验证工作得很好，但是如何实现一个特定的功能让我很头疼。
几乎所有的应用程序都被锁定在身份验证之后。这个想法是:如果用户在未登录的情况下访问了应用程序中的任何页面，应用程序应该将用户重定向到登录页面。这些都很好。
然而，登录页面需要一个完全不同的布局。没有来自"主设计"的设计元素用于登录界面。甚至body标签上的css类也是不同的。
解决这个问题的最好方法是什么?
我试着在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 { }
为此，您可以创建布局模块并创建Inside和Outside布局组件，并在两个组件中添加<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将根据用户重定向到特定页面来处理用户是否登录。并根据路由设置布局。
注意:你必须对Angular的lazyloading有基本的了解