Войти и зарегистрироваться не работает в angular8 - PullRequest
Новая
       46

Войти и зарегистрироваться не работает в angular8

0 голосов
/ 17 апреля 2020

Я пытаюсь войти в систему и зарегистрировать раздел с использованием метода реактивной формы в angular 8, но не работает. Я не получаю никакой ошибки, но когда я нажимаю кнопку отправки или регистрации, получаю предупреждающее сообщение, подобное этому: [объект объекта]. Поэтому я не могу найти решение. Процесс регистрации и регистрации не работает. Если кто-нибудь знает, пожалуйста, помогите мне решить эту проблему.

Демо: 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);
}
}

1 Ответ

0 голосов
/ 18 апреля 2020

Причина, по которой вы видите [объект Object], заключается в том, что вы передаете весь HttpErrorResponse, который является объектом. Ваш шаблон компонента оповещения будет отображаться правильно, если он не является объектом.

Вы можете изменить способ отправки формы входа в систему следующим образом 

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;
                });
    }

то, что я сделал, передало поле сообщения из ответа об ошибке. если вы хотите иметь logi c для различных кодов ошибок 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>
...