I have a home page and login I want if the user is not logged I redirect him to the login page to authenticat
here is my script
login.component.ts
- import { Component } from '@angular/core';
- import {Routes, RouterModule} from '@angular/router';
- import { Router } from '@angular/router';
- import {AuthenticationService,User} from './data.service'
-
- @Component({
- selector: 'my-login',
- providers: [AuthenticationService],
- template: `
- <div class="container" >
- <div class="title">
- Welcome
- div>
- <div class="panel-body">
- <div class="row">
- <div class="input-field col s12">
- <input [(ngModel)]="user.email" id="email"
- type="email" class="validate">
- <label for="email">Emaillabel>
- div>
- div>
-
- <div class="row">
- <div class="input-field col s12">
- <input [(ngModel)]="user.password" id="password"
- type="password" class="validate">
- <label for="password">Passwordlabel>
- div>
- div>
-
- <span>{{errorMsg}}span>
- <button (click)="login()"
- class="btn waves-effect waves-light"
- type="submit" name="action">Loginbutton>
-
- <li class="active"><a [routerLink]='["/register"]'>Registera>li>
- div>
- div>
- `
- })
- export class LoginComponent
- {
- public user = new User('','');
- public errorMsg = '';
-
- constructor(
- private _service:AuthenticationService) {}
-
- ngOnInit()
- {
- this._service.add_user(this.user);
- }
-
- login() {
- if(!this._service.login(this.user)){
- this.errorMsg = 'Failed to login';
- }
- }
-
- }
data.service.ts
- import {Injectable} from '@angular/core';
- import {Router} from '@angular/router';
-
- export class User {
- constructor(
- public email: string,
- public password: string) { this.email=email;this.password=password}
- }
-
-
-
-
- @Injectable()
- export class AuthenticationService {
-
- users :User[]= [
- new User('[email protected]','adm'),
- new User('[email protected]','a23'),
- new User('[email protected]','a')
- ];
- constructor(
- private _router: Router){}
-
- logout() {
- localStorage.removeItem("user");
- this._router.navigate(['Login']);
- }
-
- login(user :any){
- var authenticatedUser :any = this.users.find(u => u.email === user.email);
- if (authenticatedUser && authenticatedUser.password === user.password)
- {
- localStorage.setItem("user", authenticatedUser)
- this._router.navigate(['home']);
- console.log(this.users)
- return true;
- }
- return false;
-
- }
-
- add_user(usr:User)
- {
-
- var authenticatedUser :any = this.users.push.call(new User(usr.email,usr.password));
- localStorage.setItem("usr",authenticatedUser);
- this._router.navigate(['login'])
- console.log(this.users)
-
- }
-
- checkCredentials(){
- if (localStorage.getItem("user") === null){
- this._router.navigate(['login']);
- }
- }
- }
home.component.ts
- import { Component, OnInit } from '@angular/core';
- import {AuthenticationService,User} from './data.service'
-
- @Component({
- selector: 'my-home',
- providers: [AuthenticationService],
- template: `
- <div class="container" >
- <div class="content">
- <span>Congratulations, you have successfully logged in!!span>
- <br />
- <a (click)="logout()" href="#">Click Here to logouta>
- div>
- div>
- `
- })
- export class HomeComponent {
-
- constructor(
- private _service:AuthenticationService){}
-
- ngOnInit(){
- this._service.checkCredentials();
- }
-
- logout() {
- this._service.logout();
- }
-
- }
and thanks in advance