I am new to Angular and currently working on building a frontend while learning how to use Angular. I have created a test app where I am integrating authentication using an API that I wrote. The authentication process is functioning well, but I am struggling to understand how to implement a specific functionality.
Most of the app's content is restricted behind authentication. The goal is that if a user tries to access any page without being logged in, they should be redirected to the login page. This aspect is working smoothly.
However, the login page requires a completely different layout. None of the design elements from the main design should be visible on the login page, not even the CSS classes used on the body tag.
What would be the best approach to solve this issue?
I attempted to use *ngIf in the app.component.html file, but it did not work as expected. Additionally, I am unsure about how to change the body class in index.html.
I hope this explanation is clear enough. Below, I have provided some source code. If more information is needed, please let me know.
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 { }