Kishore Kumar :
1) [ Create guard, the file name would be like auth.guard.ts ]\n\nng generate guard auth \n\nimport { Injectable } from '@angular/core';\nimport { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from \n'@angular/router';\nimport { Observable } from 'rxjs/Observable';\nimport { AuthService } from './auth.service';\nimport {Router} from '@angular/router';\n@Injectable()\nexport class AuthGuard implements CanActivate {\n constructor(private auth: AuthService,\n private myRoute: Router){\n }\n canActivate(\n next: ActivatedRouteSnapshot,\n state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {\n if(this.auth.isLoggedIn()){\n return true;\n }else{\n this.myRoute.navigate([\"login\"]);\n return false;\n }\n }\n}\n\n\n2) Create below pages\n\nng g c login [Create login page ]\nng g c nav [Create nav page ]\nng g c home [Create home page ]\nng g c registration [Create registration page ]\n\n\n3) App.module.ts file add below contents\n\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { RouterModule,Router,Routes } from '@angular/router';\nimport { ReactiveFormsModule,FormsModule } from '@angular/forms';\nimport { AuthService } from './auth.service';\nimport { AuthGuard } from './auth.guard';\n\nimport { AppComponent } from './app.component';\nimport { LoginComponent } from './login/login.component';\nimport { NavComponent } from './nav/nav.component';\nimport { HomeComponent } from './home/home.component';\nimport { RegistrationComponent } from './registration/registration.component';\n\nconst myRoots: Routes = [\n { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: \n [AuthGuard]},\n { path: 'register', component: RegistrationComponent },\n { path: 'login', component: LoginComponent},\n { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}\n];\n\n@NgModule({\n declarations: [\n AppComponent,\n LoginComponent,\n NavComponent,\n HomeComponent,\n RegistrationComponent\n ],\n imports: [\n BrowserModule,ReactiveFormsModule,FormsModule,\n RouterModule.forRoot(\n myRoots,\n { enableTracing: true } // <-- debugging purposes only\n )\n ],\n providers: [AuthService,AuthGuard],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n4) Add link in nav.component.html\n\n<p color=\"primary\">\n <button routerLink=\"/home\">Home</button>\n <button *ngIf=\"!auth.isLoggedIn()\" routerLink=\"/register\">Register</button>\n <button *ngIf=\"!auth.isLoggedIn()\" routerLink=\"/login\">Login</button>\n <button *ngIf=\"auth.isLoggedIn()\" (click)=\"auth.logout()\">Logout</button>\n</p>\n\n\n4.1) Add in nav.component.ts file\n\nimport { Component, OnInit } from '@angular/core';\nimport { AuthService } from '../auth.service';\n@Component({\n selector: 'app-nav',\n templateUrl: './nav.component.html',\n styleUrls: ['./nav.component.css']\n})\nexport class NavComponent implements OnInit {\n constructor(public auth: AuthService) { }\n ngOnInit() {\n }\n}\n\n\n5) Create service page Add below code in authservice.ts\n\nng g service auth \n\nimport { Injectable } from '@angular/core';\nimport { Router } from '@angular/router';\n@Injectable()\nexport class AuthService {\n constructor(private myRoute: Router) { }\n sendToken(token: string) {\n localStorage.setItem(\"LoggedInUser\", token)\n }\n getToken() {\n return localStorage.getItem(\"LoggedInUser\")\n }\n isLoggedIn() {\n return this.getToken() !== null;\n }\n logout() {\n localStorage.removeItem(\"LoggedInUser\");\n this.myRoute.navigate([\"Login\"]);\n }\n}\n\n\n6) add content in login.ts\n\nimport { Component, OnInit } from '@angular/core';\nimport { FormBuilder, Validators } from '@angular/forms';\nimport { Router } from '@angular/router';\nimport { AuthService } from '../auth.service';\n@Component({\n selector: 'app-login',\n templateUrl: './login.component.html',\n styleUrls: ['./login.component.css']\n})\nexport class LoginComponent implements OnInit {\n form;\n constructor(private fb: FormBuilder,\n private myRoute: Router,\n private auth: AuthService) {\n this.form = fb.group({\n email: ['', [Validators.required, Validators.email]],\n password: ['', Validators.required]\n });\n }\n ngOnInit() {\n }\n login() {\n if (this.form.valid) {\n this.auth.sendToken(this.form.value.email)\n this.myRoute.navigate([\"home\"]);\n }\n }\n}\n\n\n6.1) add in login.component.html page\n\n<form [formGroup]=\"form\" (ngSubmit)=\"login()\">\n<div>\n<input type=\"email\" placeholder=\"Email\" formControlName=\"email\" />\n</div>\n<div>\n<input type=\"password\" placeholder=\"Password\" formControlName=\"password\" />\n</div>\n<button type=\"submit\" color=\"primary\">Login</button>\n</form>\n\n\n7) Add below code in app.component.html\n\n<app-nav></app-nav>\n<router-outlet></router-outlet>\n",
2018-09-26T10:10:47