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>
时间: 2024-11-11 04:07:03