how to verify if user is authenticated using angular2

Question

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('[e-mail]','adm'),
    new User('[e-mail]','a23'),
    new User('[e-mail]','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  

Answer 1

Gajendra Jangid 

it is in this link that I took my code but I want that in the home I check if the user connect or not otherwise I redirect him to login page

Answer 2

Hi,

Visit below link :-

http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/