我是 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>
索引.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 { }
uj5u.com熱心網友回復：
為此，您可以創建布局模塊并創建內部和外部布局組件并添加<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 LazyLoding 有基本的了解
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324641.html
上一篇：wxPython-如何創建帶有兩個插入面板的單個框架？
下一篇：嵌套組件的角度管理狀態