Add login page to paper dashboard angular theme

user_1934741 0
Viewed 596

I'm using paper dashboard theme to develop my own angular website: https://www.creative-tim.com/product/paper-dashboard

Its source folder tree is the following:

enter image description here

Paper dashboard theme contains a main component with following html:

<div class="wrapper">
    <div class="main-panel">
        <navbar-cmp></navbar-cmp>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
    <footer-cmp></footer-cmp>
    </div>

    <div class="sidebar" data-color="white" data-active-color="danger">
    <sidebar-cmp></sidebar-cmp>
    </div>
    <div class="main-panel">

    </div>
</div>
<fixedplugin-cmp></fixedplugin-cmp>

this component will include all child components like navbar, sidebar and subpages (dashboard, userprofile, icons, ...).

the app routing is the following app.routing.ts:

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  }, {
    path: '',
    component: AdminLayoutComponent,
    children: [
    {
      path: '',
      loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
  }]},
  {
    path: '**',
    redirectTo: 'dashboard'
  }
]

admin-layout.module.ts typescript file is the following:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AdminLayoutRoutes } from './admin-layout.routing';

import { DashboardComponent }       from '../../pages/dashboard/dashboard.component';
import { UserComponent }            from '../../pages/user/user.component';
import { TypographyComponent }      from '../../pages/typography/typography.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule
  ],
  declarations: [
    DashboardComponent,
    UserComponent,
    UpgradeComponent,
    TypographyComponent,
  ]
})

export class AdminLayoutModule {}

admin layout component permits navigation to its subpages by routing file:

import { Routes } from '@angular/router';

import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { UserComponent } from '../../pages/user/user.component';
import { TypographyComponent } from '../../pages/typography/typography.component';
import { UpgradeComponent } from '../../pages/upgrade/upgrade.component';

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'user',           component: UserComponent },
    { path: 'typography',     component: TypographyComponent },
    { path: 'upgrade',        component: UpgradeComponent }
];

My purpose is to add login page that permits to secure access to my website.

I added a login component and I modified the app.routing.ts file to become:

import { Routes } from '@angular/router';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { LoginComponent } from './admin/login/login.component';

export const AppRoutes: Routes = [
  {
      path: '',
      component: LoginComponent,
  },
]

this modif permits to open the login page as first page:

enter image description here

then I add to button login the (click) event: login:

<button type="submit" class="btn btn-primary btn-round" (click)="login()">login</button>

the login() is type script function that I developed in login.component.ts:

login(){
    /*
        validate username and password with backend
    */
    ....

    /*
    navigate to admin layout subpages in case username and password are validate
    */
    if(username and password are validated) 
        this.router.navigate(['AdminLayoutComponent']); 
}

My question now is how I should modify login() function and routing files so I can access to my main pages of admin layout after I click login button?

angular typescript routing html
1 Answers

You can use route guards to prevent access to pages without login. there are several types of route guards like 

CanActivate
CanActivateChild
CanDeactivate
CanLoad
Resolve

You can learn more about this in https://angular.io/guide/router

For login, I dont know what your backend returns. If it's a token based authentication, after returning the token from the backend, you can save the token in local storage. Then before activating a child you can write a function which will check the validity of the token and return true if the token is set. Then you can add the function to CanActivate guard of the routers.

Since your question is too broad to answer, I will suggest you some reading some blogs about this- https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3 https://www.techiediaries.com/angular-jwt/ https://blog.angular-university.io/angular-jwt-authentication/

user_70477940
Related