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

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

[Angular] Design API for show / hide components based on Auth的相关文章

angular -- $route API翻译

$route -$routeProvider服务 -依赖ngRoute模块 $route能够在路径发生改变的时候,渲染不同的视图,调用不同的控制器.它监测了$location.url(),然后根据路径来匹配相应的路由,路由的定义方法详见$routeProvider的API. $route通常和$routeProvider服务和ngView指令一起使用 依赖: $location$routeParams 方法: reload() 在路由没有改变的时候,再次加载当前路径的路由,重新渲染ng-view

angular -- $routeParams API翻译

原api出处: https://docs.angularjs.org/api/ngRoute/service/$routeParams $routeParams 可以获取当前路径参数. 需要ngroute模块被安装. 路径参数是$location.search()和$location.path()的组合. 当$route被匹配的时候,路径参数就会被获取. 在参数名称冲突的情况下,路径参数优先于搜索参数. $routeParams服务保证当路由发生变化时,$routeParams对象的id不会变化

使用内部(com.android.internal)和隐藏(@hide)API[第1部分,介绍]

本文翻译自http://devmaze.wordpress.com/2011/01/18/using-com-android-internal-part-1-introduction/#more-79 Android有两类API在SDK中不能使用. 第一类就是位于包com.android.internal的API,我将这些API称为内部API.第二类API就是用@hide标记的类和函数,虽然严格说这不是一个API而是一系列隐藏API的集合,我仍然假定这是一个API,称为隐藏API. 隐藏API的

[Angular 2] Move and Delete Angular 2 Components After Creation

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components. import { Component,

爱搜索,爱生活,基于豆瓣API &amp; Angular开发的web App(by vczero)

一.扯淡的说 name:[豆瓣搜索] 最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口.最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事.豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app.于是...网上回家就折腾了. 体验地址:http://vczero.github.io/t/h

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It

Angular之Providers (Value, Factory, Service and Constant )

官方文档Providers Each web application you build is composed of objects that collaborate to get stuff done.(每一个web应用都是由一些对象“组装”成的,这些对象共同合作,来完成特定的任务)These objects need to be instantiated and wired together for the app to work.(这些对象需要被实例化,然后“组装”在一起来使web应用能

插件api

public class TextBoxes extends AnAction { // If you register the action from Java code, this constructor is used to set the menu item name // (optionally, you can specify the menu description and an icon to display next to the menu item). // You can

java7 API详解

Java™ Platform, Standard Edition 7API Specification This document is the API specification for the Java™ Platform, Standard Edition. See: Description Packages  Package Description java.applet Provides the classes necessary to create an applet and the