使用带有角度的伪API登录的问题 [英] Problem to use fake API login with angular

问题描述

我是Angular的新手，我只是编写检查登录的服务，但我没有服务端代码所以我找到了假API来测试登录，但我不知道为什么它没有'工作。 
 
这是假API的网站https://reqres.in/您可以找到登录API。 
 
在此处输入图片描述

我尝试过：

这是我写的服务： -  

< pre lang =Javascript>< pre> import {Injectable} from ' @ angular / core' ;
import {Http}来自' @ angular / HTTP';
import ' rxjs / add / operator /图;

@Injectable（）
export class AuthService {
构造函数（ private http：Http）{
}

登录（凭证）{
返回 此 .http.post（' https://reqres.in/api/login'，
JSON .stringify（credentials））。map（response => {
let result = response.json（）;
if （result&& result.token）{
localStorage.setItem（ token，result.token）;
return true ;
}
else {
return false ;
}
}）;
}


isLoggedIn（）{
return 假;
}
}

登录组件： 

< pre>导入{AuthService}来自 '  ./../ services / auth.service'; 
  import  {Component}来自'  @ angular /芯; 
  import  {Router}来自  @ angular /路由器; 
 
 @Component（{
 selector：'  login'， 
 templateUrl：'  ./ login.component.html'，
 styleUrls： ['  ./ login.component.css'] 
}）
 < span class =code-keyword> export   class  LoginComponent {
 invalidLogin： boolean ; 
 
 构造函数（
 私人路由器：路由器，
  private  authService：AuthService）{} 
 
 signIn（凭据）{
  this  .authService.login（credentials）
 .subscribe（result => {
  if （result）
 < span class =code-keyword> this  .router.navigate（['  /']）; 
  else  
  this  .invalidLogin =  true ; 
}）; 
} 
} 

解决方案

请使用以下链接学习使用res api的基本登录设置< br $> b $ b

Angular 6教程 - 在这个速成课程中学习Angular 6 [ ^ ]

I'm new to Angular , I just write service that check login but I don't have serve side code so I found fake API to test login but I don't know why it doesn't work.

Here's the site of the fake API https://reqres.in/ you can find the login API.

enter image description here

What I have tried:

Here's the service I wrote :-

<pre>import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
  constructor(private http: Http) {
  }

  login(credentials) { 
   return this.http.post('https://reqres.in/api/login', 
      JSON.stringify(credentials)).map(response=>{
        let result = response.json();
         if (result && result.token) {
           localStorage.setItem("token", result.token) ;
           return true;
         }
         else{
           return false;
         }
      });
  }


  isLoggedIn() { 
    return false;
  }
}

Login Component :

<pre>import { AuthService } from './../services/auth.service';
import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  invalidLogin: boolean; 

  constructor(
    private router: Router, 
    private authService: AuthService) { }

  signIn(credentials) {
    this.authService.login(credentials)
      .subscribe(result => { 
        if (result)
          this.router.navigate(['/']);
        else  
          this.invalidLogin = true; 
      });
  }
}

解决方案

Please use the following link to learn basic set of login with consuming res api's

Angular 6 Tutorial - Learn Angular 6 in this Crash Course[^]

这篇关于使用带有角度的伪API登录的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！