json - Angular 5でjson-serverでログインするには?

Question

私はAngularの初心者です。ログインセクションで立ち往生しています。jsonを使用してloginUser()で何をコーディングしますか? 私を助けてください。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { CollapseModule } from 'ngx-bootstrap';
import { HomeComponent } from './component/home/home.component';
import { AboutComponent } from './component/about/about.component';
import { ContactComponent } from './component/contact/contact.component';
import { RegisterComponent } from './component/register/register.component';
import { LoginComponent } from './component/login/login.component';


const appRoutes: Routes = [
  {path:'', component:HomeComponent},
  {path:'about', component:AboutComponent},
  {path:'contact', component:ContactComponent},
  {path:'register', component:RegisterComponent},
  {path:'login', component:LoginComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    CollapseModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

register.component.html

<div class="col-md-6 col-md-offset-3">
    <h2>Register</h2>
    <form #userData = "ngForm" (ngSubmit) = "addUser(userData.value)">
        <div class="form-group" >
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" required />
        </div>
        <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" required />
        </div>
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" [(ngModel)]="username" required />
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" name="email" [(ngModel)]="email" required />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="password" required />
        </div>
        <div class="form-group">
            <button class="btn btn-primary">Register</button>
            <a routerLink="/login" class="btn btn-primary">Login</a>
            <a routerLink="/" class="btn btn-link">Cancel</a>
        </div>
    </form>
</div>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  constructor(private http: Http, private router: Router) { }

  userAddString: string = "User Registered Successfully";

  userObj:object = {};

  addUser(user){
    this.userObj = {
    "fname": user.firstName,
    "lname": user.lastName,
    "email": user.email,
    "username": user.username,
    "password": user.password
    };
    this.http.get("http://localhost:4201/users/", this.userObj).subscribe((Response) => {
        console.log(this.userObj);
        this.router.navigate(['/login']);

    })
  }

  ngOnInit() {
    console.log('Register Component Running...');
  }

}

login.component.html

<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form #loginData = "ngForm" (ngSubmit) = "loginUser(loginData.value)">
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" name="username" required />
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" name="password"  required />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Login</button>
        <!-- <input type="submit" value="Login" /> -->
        <a routerLink="/register" class="btn btn-primary">Sign Up</a>
        <a routerLink="/" class="btn btn-link">Cancel</a>
    </div>
</form>

ログインして、作成済みの json を使用してユーザー プロファイルにリダイレクトしたい。

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers } from '@angular/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router, private http: Http) { }


  ngOnInit() {
    console.log('login Component Running...');
  }

  loginUser(){

  }

Angular 5でjson-serverでログインするには?