Simple Auth service:
import { Injectable } from ‘@angular/core‘;
import {HttpClient} from ‘@angular/common/http‘;
import {Observable} from ‘rxjs/Observable‘;
import {User} from ‘../model/user‘;
import {BehaviorSubject} from ‘rxjs/BehaviorSubject‘;
import ‘rxjs/add/operator/map‘;
export const ANONYMOUS_USER: User = {
id: undefined,
email: ‘‘
};
@Injectable()
export class AuthService {
subject = new BehaviorSubject<User>(ANONYMOUS_USER);
user$: Observable<User> = this.subject.asObservable();
isLoggedIn$: Observable<boolean> = this.user$.map(user => !!user.id);
isLoggedOut$: Observable<boolean> = this.isLoggedIn$.map(isLoggedIn => !isLoggedIn);
constructor(private http: HttpClient) { }
signUp(email: string, password: string) {
}
}
Using Observable is a easy way to implement reactive application.
Create a BehaviorSubject and then convert subject to Observable. BehaviorSubject also takes a init param.
The isLoggedIn$ & isLoggedOut$ based on user$.
The in the component, we inject the auth service:
import {Component, OnInit} from ‘@angular/core‘;
import {AuthService} from ‘./services/auth.service‘;
import {Observable} from ‘rxjs/Observable‘;
import {User} from ‘./model/user‘;
@Component({
selector: ‘app-root‘,
templateUrl: ‘./app.component.html‘,
styleUrls: [‘./app.component.css‘]
})
export class AppComponent implements OnInit {
user$: Observable<User>;
isLoggedIn$: Observable<boolean>;
isLoggedOut$: Observable<boolean>;
constructor(private auth: AuthService) {
}
ngOnInit() {
this.user$ = this.auth.user$;
this.isLoggedIn$ = this.auth.isLoggedIn$;
this.isLoggedOut$ = this.auth.isLoggedOut$;
}
}
HTML:
<li *ngIf="isLoggedOut$ | async"> <a routerLink="/signup">Sign Up</a> </li> <li *ngIf="isLoggedOut$ | async"> <a routerLink="/login">Login</a> </li> <li *ngIf="isLoggedIn$ | async"> <a >Logout</a> </li>
[Angular] Design API for show / hide components based on Auth
原文：http://www.cnblogs.com/Answer1215/p/7259933.html