时间戳

首页 > 解决方案 > 如何隐藏或显示管理员链接

angular - 如何隐藏或显示管理员链接

问题描述

我正在尝试隐藏链接，我已经查看了文档并在此处修复了堆栈溢出问题，但我更改代码只会让事情变得更糟。这是代码。

AdminAuthGuardService

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Injectable()
export class AdminAuthGuardService implements CanActivate {

  constructor(private auth: AuthService,
  private userService: UserService) {}

  canActivate(): Observable<boolean> {
    return this.auth.appUser$
    .map(appUser => appUser.isAdmin);//the error is here
  }
}

身份验证服务

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import { AppUser } from './models/App-user';

import { UserService } from './user.service';
import 'rxjs/add/operator/switchmap';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
user$: Observable<firebase.User>;

  constructor(
    private userService : UserService,
    private afAuth: AngularFireAuth, private route: ActivatedRoute) {
    this.user$=afAuth.authState;
  } 

login (){
  let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
  localStorage.setItem('returlUrl', returnUrl);

  this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

}

logout () {
  this.afAuth.auth.signOut();
  }

  get appUser$() : Observable<AppUser> {
    return this.user$
  .switchMap(user => this.userService.get(user.uid))
} 
  }

bs -导航栏组件

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { AppUser } from '../models/App-user';

@Component({
  selector: 'bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent  {
  appUser: AppUser;

  constructor(private auth: AuthService) { 
   auth.appUser$.subscribe(appUser=> this.appUser = appUser);//the error is here 
  }

  logout() {
  this.auth.logout();
  }

}

我得到的错误是重复 1.identifier'iterator Result ' in node_modules@types\node 2.type observable 在 adminAuthguard.service 中不可分配 3.type angular fire 对象在 auth 中不可分配。服务

标签： angular

解决方案

我假设您使用的是 Rxjs v6。由于 map 是一个运算符，你应该像这样管道 map 运算符

canActivate(): Observable<boolean> {
   return this.auth.appUser$.pipe(
      map(appUser => appUser.isAdmin);
   )
}

与您的切换地图运算符相同

get appUser$() : Observable<AppUser> {
    return this.user$.pipe(
       switchMap(user => this.userService.get(user.uid))
    )
}

您的 switchMap 导入应该是：

import { switchMap } from 'rxjs/operators';

推荐阅读