[Angular] Design API for show / hide components based on Auth
2023-09-14 08:59:18 时间
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 结合 dygraphs 实现 annotation
- 关于 Angular HTTP Interceptor 中 Request 和 Response 的 immutable 特性
- Angular HTTPClient API 在 SAP 电商云中的使用
- angular基础面试题_java web面试题
- uat环境和生产环境的区别_angular 生产环境 相对路径无效
- 解决angular创建项目报错:setTimeout is not defined
- Angular 应用里 index.html 的作用
- Angular SSR 和 PWA 结合起来使用的一些现象观察
- 【Angular教程】-组件初识|8月更文挑战
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- 关于 Angular 应用部署时的 base-href 参数
- Angular和jQuery的区别
- Web 前端框架:Angular 4.0.0 正式版发布
- Angular 6.0 即将发布 承诺更小更快更易用
- MySQL中使用ON子句进行精准查询(mysql中on子句查询)
- delete cascadeOracle 中 ON DELETE CASCADE 的使用(oracle中的on)
- Oracle数据库中ON关键字的使用方法(oracle中on怎么用)