Question

我有一个组件login.component.ts。这是代码：

import { Component } from "@angular/core";
import { Router } from "@angular/router";

import { AuthenticationService } from "../services/authentication.service"; 

    @Component({
        selector: "login",
        templateUrl: "app/login/login.component.html",
        styleUrls: ['../../style.css'],
        providers: [AuthenticationService]
    })

    export class LoginComponent{

        constructor(private authenticationService: AuthenticationService,  
                    private router: Router) { }

        login(value: any){
          this.authenticationService.login(value).subscribe(
            (data) => {
               this.authenticationService.setAuth(data.user);
               this.router.navigate(['']);
           });
       }
    }

在服务authentication.service.ts中发送的表单中的已完成数据。这是代码：

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { AppConfig } from '../app.config';

import { User } from '../models/user.model';

import { JwtService } from './jwt.service';
import { ApiService } from './api.service';

@Injectable()
export class AuthenticationService {
    constructor(private http: Http,
        private appConfig: AppConfig,
        private jwtService: JwtService,
        private apiService: ApiService) { }

    private currentUserSubject = new BehaviorSubject(new User());
    currentUser = this.currentUserSubject.asObservable();

    private isAuthenticatedSubject  = new ReplaySubject(1);
    authenticated = this.isAuthenticatedSubject.asObservable();

    checkAuth() {
        if (this.jwtService.getToken()) {
            console.log("Auth");
            this.apiService.getUserByToken().subscribe(
                data => {
                    this.setAuth(data.user)
                },
                err => {
                    this.logout();
                }
            )
        } else {
            console.log("NoAuth");
            this.logout();
        }
    }

    setAuth(user: User) {
        console.log(user);
        this.currentUserSubject.next(user);
        this.isAuthenticatedSubject.next(true);
        this.jwtService.setToken(user.token);
        console.log(this.currentUserSubject);
        console.log(this.isAuthenticatedSubject);
    }

    login(user: User) {
        return this.http.post(this.appConfig.urlServer + "/auth/login", user)
            .map((res) => {
                return res.json();
            })
            .catch((error) => Observable.throw(error.json().error || 'Server error'))
    }

    logout() {
        this.jwtService.removeToken();
        this.currentUserSubject.next(new User());
        this.isAuthenticatedSubject.next(false);
    }

}

我在currentUserSubject中添加了有关用户的数据，该数据已成功登录如果用户成功登录，我在isAuthenticatedSubject中添加值true，如果用户没有登录，则为false。

单击currentUserSubject和isAuthenticatedSubject中Login中的按钮login.component.ts后，不会添加数据。

我不知道为什么会这样。请帮我。

P.S。我住在白俄罗斯所以我的英语技能不是超级！

已编辑

屏幕：

output console

我在isAuthenticatedSubject上订阅了auth.directive.ts。这是代码：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

import { AuthenticationService } from '../services/authentication.service';

@Directive({ 
    selector: '[showAuthed]'
})

export class ShowAuthedDirective {
    constructor(
        private templateRef: TemplateRef<any>,
        private authenticationService: AuthenticationService,
        private viewContainer: ViewContainerRef
    ) { }

    private isAuthenticated: any;

    @Input() set showAuthed(condition: boolean) {
        this.authenticationService.authenticated.subscribe(
            (isAuthenticated) => {
                this.isAuthenticated = isAuthenticated;
                if (!condition && !this.isAuthenticated || condition && this.isAuthenticated) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                } else {
                    this.viewContainer.clear();
                }
            }
        );
    }

}

我还在header.component.ts中添加了对currentUserSubject的订阅。这是代码：

import { Component, OnInit } from '@angular/core';

import { AuthenticationService } from '../services/authentication.service';

import { User } from '../models/user.model';

@Component({
    selector: 'header-layout',
    templateUrl: 'app/header/header.component.html'
})

export class HeaderComponent implements OnInit {
    constructor(private authenticationService: AuthenticationService) { 
    }

    currentUser: User;
    condition: boolean;

    ngOnInit() {
        this.authenticationService.currentUser.subscribe(
            (userData) => {
                this.currentUser = userData;
            }
        )
    }

    logout() {
        this.authenticationService.logout();
    }
}

数据不会添加到BehaviorSubject和ReplaySubject

0 个答案: