登录和注册在 Angular 8 中不起作用

Posted 2023-03-13

【中文标题】登录和注册在 Angular 8 中不起作用

【英文标题】：Login and register is not working in angular8

【发布时间】：2020-07-31 03:45:53

【问题描述】：

我正在尝试使用 Angular 8 中的响应式方法登录和注册部分，但没有工作。我没有收到任何错误，但是当我单击提交或注册按钮时，会收到这样的警报消息：[object Object]。所以我找不到解决方案。登录和注册过程不起作用。如果有人知道请帮我解决这个问题。

演示：https://stackblitz.com/edit/angular-7-registration-login-example-rfqlxg?file=app%2Fweb%2F_services%2Fuser.service.ts

user.service.ts:

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';

import  User  from '../_models';

@Injectable( providedIn: 'root' )
export class UserService 
constructor(private http: HttpClient)  

getAll() 
    return this.http.get<User[]>(`/users`);


getById(id: number) 
    return this.http.get(`/users/` + id);


register(user: User) 
    return this.http.post(`/users/register`, user);


update(user: User) 
    return this.http.put(`/users/` + user.id, user);


delete(id: number) 
    return this.http.delete(`/users/` + id);

authentication.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 '../_models';

@Injectable( providedIn: 'root' )
export class AuthenticationService 
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient) 
    this.currentUserSubject = new      BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();


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


login(username: string, password: string) 
    return this.http.post<any>(`/users/authenticate`,  username, password )
        .pipe(map(user => 
            // login successful if there's a jwt token in the response
            if (user && user.token) 
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
            

            return user;
        ));


logout() 
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);

【问题讨论】：

在第 57 行的 login.component.ts 中尝试 this.alertService.error(error.message);

收到此错误：angular-7-registration-login-example-fthtbb.stackblitz.io/users/… 的 Http 失败响应：403 OK

@ferhen : 如何解决这个问题？

【参考方案1】：

您看到 [object Object] 的原因是因为您传递了整个 HttpErrorResponse ，它是一个 object 。如果它不是对象，您的警报组件模板将正确显示它。

您可以更改登录表单提交方法如下

onSubmit() 
        this.submitted = true;
        // stop here if form is invalid
        if (this.loginForm.invalid) 
            return;
        

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => 
                    this.router.navigate([this.returnUrl]);
                ,
                error => 
                    this.alertService.error(error.message);
                    this.loading = false;
                );
    

请更改注册组件提交方法如下

 onSubmit() 
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) 
            return;
        

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => 
                    this.router.navigate([this.returnUrl]);
                ,
                error => 
                    this.alertService.error(error.message);
                    this.loading = false;
                );
    

我所做的是从错误响应中传递消息字段。如果你想对不同的 http 错误代码有一个逻辑，你可以在这里拥有它并根据错误代码将消息字符串传递给错误方法。如果你想通过错误码处理，请尝试

onSubmit() 
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) 
            return;
        

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => 
                    this.router.navigate([this.returnUrl]);
                ,
                error => 
                    if(error.staus === 403)
                      this.alertService.error("You are not authorized");
                    else
                      this.alertService.error("Something went wrong");
                    
                    this.loading = false;
                );
    

如果您想按原样显示错误 更改警报组件模板如下

<div *ngIf="message" [ngClass]=" 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' ">message.text |json</div>

【讨论】：

获取错误：angular-7-registration-login-example-smrdys.stackblitz.io/users/… 的 Http 失败响应：403 OK

你的概念行不通：stackblitz.com/edit/…

这就是你收到的错误。这就是它显示的原因。

我在您的 stackblitz 链接中对其进行了测试，它正在工作。

到目前为止，我们通过了错误响应字段的任何消息。在您的情况下，它是“Getting Error: Http failure response for angular-7-registration-login-example-smrdys.stackblitz.io/users/…: 403 OK”。如果您不想要此消息。您可以检查状态并返回消息