首页 > Windows开发 > 详细

[Angular] Design API for show / hide components based on Auth

时间:2017-07-30 18:55:11      阅读:261      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!