【发布时间】：2021-12-02 09:27:38
【问题描述】：
我是 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 { }
【问题讨论】：
标签： css angular user-interface authentication