我试图用角度创建登录页面,但是在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;
}
})
)
}
}
答案 0 :(得分:0)
您的身份验证服务正在调用一个API(对于实际实施而言)应返回某种身份验证令牌。
在您链接的博客文章的“使用真实的后端API运行教程示例”部分中,您将找到有关如何实现此类API的说明。
另一种选择是启用同一系列中提到的模拟服务:
https://jasonwatmore.com/post/2019/05/02/angular-7-mock-backend-example-for-backendless-development