Средство проверки подлинности стека RX JS не работает? - PullRequest
Новая
       5

Средство проверки подлинности стека RX JS не работает?

1 голос
/ 04 апреля 2020

Я пытаюсь запустить этот код аутентификации стека MEAN из github: https://github.com/sitepoint-editors/mean-authentication

Я впервые работаю со стеком MEAN специально.

I успешно подключили внутреннюю локальную MongoDB, а интерфейс Angular скомпилировал и запустил как задумано. Однако, когда я пытаюсь зарегистрироваться, я получаю эту ошибку:

Внешний интерфейс Angular сайт работает

Ошибка в консоли

Вот строка, в которой данные отображаются с помощью Rx JS. В строке if (data.token) происходит сбой из-за отсутствия данных. 

const request = (base$).pipe(map((data: TokenResponse) => {
        if (data.token) {
          this.saveToken(data.token);
        }
        return data;

Вот полный код страницы: 

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

export interface UserDetails {
  _id: string;
  email: string;
  name: string;
  exp: number;
  iat: number;
}

interface TokenResponse {
  token: string;
}

export interface TokenPayload {
  email: string;
  password: string;
  name?: string;
}

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  private token: string;

  constructor(private http: HttpClient, private router: Router) {}

  private saveToken(token: string): void {
    console.log("hi");
    localStorage.setItem("mean-token", token);
    this.token = token;
  }

  private getToken(): string {
    if (!this.token) {
      this.token = localStorage.getItem("mean-token");
      console.log(this.token);

    }
    return this.token;
  }

  private request(
    method: "post" | "get",
    type: "login" | "register" | "profile",
    user?: TokenPayload
  ): Observable<any> {
    let base$;
    if (method === "post") {
      base$ = this.http.post(`/api/${type}`, user);
      console.log("basepost", base$);
    } else {
      base$ = this.http.get(`/api/${type}`, {
        headers: { Authorization: `Bearer ${this.getToken()}` }
      });
    }
    console.log("base", base$);

    const request = (base$).pipe(map((data: TokenResponse) => {
        if (data.token) {
          this.saveToken(data.token);
        }
        return data;
      })
    );

    return request;
  }

  public logout(): void {
    this.token = "";
    window.localStorage.removeItem("mean-token");
    this.router.navigateByUrl("/");
  }

  public getUserDetails(): UserDetails {
    const token = this.getToken();
    let payload;
    if (token) {
      payload = token.split(".")[1];
      payload = window.atob(payload);
      return JSON.parse(payload);
    } else {
      return null;
    }
  }

  public isLoggedIn(): boolean {
    const user = this.getUserDetails();
    if (user) {
      return user.exp > Date.now() / 1000;
    } else {
      return false;
    }
  }

  public register(user: TokenPayload): Observable<any> {
    return this.request("post", "register", user);
  }

  public login(user: TokenPayload): Observable<any> {
    return this.request("post", "login", user);
  }

  public profile(): Observable<any> {
    return this.request("get", "profile");
  }
}

Я хотел бы, чтобы данные не быть нулевым, чтобы сохранить маркер. Любые идеи, почему я получаю этот результат данных нулевой?

Это руководство, которое я нашел GitHub через: https://www.sitepoint.com/mean-stack-angular-angular-cli/

...