calling login webservice using observable in angular

Question

I am calling login webservice using observable method in angular:

login.component.html

<div style="text-align: center;">
  <h3>Login</h3>
  <div>
    <div>
      <label>UserName:</label>
      <input [(ngModel)]="txtusername" id="username" type="text" required />
    </div>
    <div>
      <label>Password:</label>
      <input [(ngModel)]="txtpassword" id="password" type="text" required />
    </div>
    <button type="button" (click)="login()">Submit</button>
  </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BackendserviceService } from '../backendservice.service';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';

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

export class LoginComponent implements OnInit {

  txtusername: any;
  txtpassword: any;

  constructor(public router: Router, public myservice: BackendserviceService) { }

  ngOnInit(): void {
  }

  login() {
    console.log("inside login method");
    this.myservice.getitem(this.txtusername, this.txtpassword).subscribe(
      (res) => {
        if (Message.toString() == "Success") {
          debugger
          this.router.navigate(['registration']);
        }
        else if (Message.toString() == "Username and Password incorrect") {
          debugger
          this.router.navigate(['login']);
        }
      }
    );
  }
}

backendservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BackendserviceService {

  constructor(private httpClient: HttpClient) { }

  //login
  url: any
  public getitem(username, password): Observable<any> {
    debugger
    this.url = "https://localhost:44371/emps/login?username=" + username + "&password=" + password;
    console.log(this.url);
    return this.httpClient.get<any>(this.url);
  }
}

I have only one record in my table

• username:admin

• password:admin123

see my console login page:

when I am debugging and checking

console.log(this.url);//https://localhost:44371/emps/login?username=rajan&password=rajan123

and above url copy and paste in browser see below output:

again I am debugging and checking**

console.log(this.url);//https://localhost:44371/emps/login?username=admin&password=admin123

and above url copy and paste in browser see below output:

I want to if user exist then redirect to registration page and if user does not exist then go to login page

Answer 1

You have to correct your if checks:

if (res.message === "Success") { // <---update to this
  this.router.navigate(['registration']);
} else { // else will suffice
  this.router.navigate(['login']);
}

Answer 2

I think the problem is with the way you are handling things in subscribe. You are directly checking the Message property but the response return from service is an object so instead of

 (res) => {
    if (Message.toString() == "Success") {
      debugger
      this.router.navigate(['registration']);
    }
    else if (Message.toString() == "Username and Password incorrect") {
      debugger
      this.router.navigate(['login']);
}

Try

  (res) => {
    if (res.message.toString() == "Success") {
      debugger
      this.router.navigate(['registration']);
    }
    else if (res.message.toString() == "Username and Password incorrect") {
      debugger
      this.router.navigate(['login']);
    }