Question

我试图用角度创建登录页面，但是在Web控制台中出现错误：

POST http://localhost:5000/api/auth/login 404（未找到）

我正在跟踪以下示例：https://jasonwatmore.com/post/2018/10/29/angular-7-user-registration-and-login-example-tutorial#login-component-html。我已经提供了到目前为止的内容，但是不确定所缺少的内容，想知道如何解决此问题。单击“登录”时，我只收到一条带有Toastr的错误消息，内容为“ [object Object]”。

login-component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../shared/user.model';
import { Router, ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { UserService } from '../shared/user.service';
import { AuthService } from '../services/auth.service';
import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'app-log-in',
  templateUrl: './log-in.component.html',
  styleUrls: ['./log-in.component.css']
})
export class LogInComponent implements OnInit {
  user:User;
  userLoginForm: FormGroup;
  loading = false;
  returnUrl: string;

  constructor(private userService:UserService, 
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService,
    private toastr: ToastrService
  ) { 
    //if (this.authService.currentUserValue) {
    //  this.router.navigate(['/']);
    //}
  }

  ngOnInit() {
    this.createLoginForm();
  }

  createLoginForm() {
    this.userLoginForm = this.fb.group({
      UserName:  ['', Validators.required],
      Password:  ['', Validators.required]
  });
  this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
} 

  get f() { return this.userLoginForm.controls; }

  onSubmit() {
    //let request : User = new User();
    //request.UserName = this.userLoginForm.get('UserName').value;
    //request.Password = this.userLoginForm.get('Password').value;

    if (this.userLoginForm.valid) {
      this.loading = true;
      this.user = Object.assign({}, this.userLoginForm.value);
      this.authService.login(this.user)
        .pipe(first())
        .subscribe(
          (data:any) => {
            this.toastr.success("Login Successful");
          }
        , 
        error => {
        this.toastr.error(error);
        this.loading = false;
    }); 
  }
  }


}

user.service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams, HttpResponse} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  readonly rootUrl = "http://localhost:5000/" //connect to API
  constructor(private http: HttpClient) { }

  registerUser(user : User) : Observable<User> 
  {
    const body : User = {
      FirstName:user.FirstName,
      LastName:user.LastName,
      UserName: user.UserName,
      Password: user.Password,
      Email: user.Email,
      Token: user.Token
    }
    return this.http.post<User>(this.rootUrl + 'api/User/Register', body);
  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../shared/user.model';
import { environment } from 'src/environments/environment';
import { JwtHelperService } from '@auth0/angular-jwt'; //npm install this

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = environment.apiUrl + 'auth/'; //in environment.ts api url
  jwtHelper = new JwtHelperService();
  decodedToken: any;
  currentUser: User;
  private currentUserSubject: BehaviorSubject<User>;

constructor(private http: HttpClient) { }

public get currentUserValue(): User {
  return this.currentUserSubject.value;
}

login(model: any) {
  return this.http.post(this.baseUrl + 'login', model).pipe(
    map((response: any) => {
      const user = response;
      if (user) {
        localStorage.setItem('token', user.token);
        localStorage.setItem('user', JSON.stringify(user.user));
        this.decodedToken = this.jwtHelper.decodeToken(user.token);
        this.currentUser = user.user;
      }
    })
  )
}

}

Answer 1

您的身份验证服务正在调用一个API（对于实际实施而言）应返回某种身份验证令牌。

在您链接的博客文章的“使用真实的后端API运行教程示例”部分中，您将找到有关如何实现此类API的说明。

另一种选择是启用同一系列中提到的模拟服务：

https://jasonwatmore.com/post/2019/05/02/angular-7-mock-backend-example-for-backendless-development

无法登录，出现错误POST http：// localhost：5000 / api / auth / login 404（未找到）

1 个答案: