如何在 FireBase 和 Angular 中根据用户隐藏元素答案

【问题标题】：How to hide elements based on user in FireBase and Angular如何在 FireBase 和 Angular 中根据用户隐藏元素
【发布时间】：2016-11-05 07:37:13
【问题描述】：

我开始将 Firebase 与 AngularJS 一起使用。来自 php/serverside 渲染页面。

我不明白我们应该如何向某些用户隐藏应用的某些部分。我基本上有3个级别的用户（客人/会员/管理员）我可以使用基于用户的 ng-show 隐藏，但这只会隐藏客户端。数据仍然发送给用户

现实生活中的例子：

菜单项因用户级别而异。我正在考虑使用 ngshow 并检查 uuid ，但话又说回来，暴露管理员 uuid 是个好主意吗？对我来说听起来很糟糕。

然后我考虑将菜单放入数据库并请求元素。并非所有用户都会访问所有项目，但这意味着很多“故意未经授权的访问尝试”

处理这个问题的正确方法是什么？我觉得我错过了一些关于依赖 Firebase 服务的纯客户端应用的重要信息。

【问题讨论】：

我认为您应该使用身份验证并在每个请求中发送用户角色...并根据用户角色公开数据
是的，但我应该如何公开数据？我在哪里可以编码？

标签： javascript angularjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

查看服务层中的 userStatus 方法及其在其他层中的用法。

服务层：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {

  user: Observable<firebase.User>;

  constructor(private fireAuth: AngularFireAuth) {
  }

  loginGoogle() {

    this.fireAuth.auth.signInWithPopup(new firebase.auth.EmailAuthProvider())
      .catch(function (error) {
        alert('Please try again');
      });
  }

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

  userStatus() {
    return this.fireAuth.authState;
  }
}

导航栏组件：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  user: Observable<firebase.User>;

  constructor(private authservice: AuthService) {
    this.user = this.authservice.userStatus();
  }

  ngOnInit() {
  }

  login() {
    this.authservice.loginGoogle();
  }

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

这是导航栏视图，您希望根据用户是否通过身份验证来隐藏或显示元素：

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" routerLink="/">Firebase</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item ">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/listings">Listings</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/add-listing">Add Listing</a>
        </li>
    </ul>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" *ngIf="!(user | async)?.uid" (click)="login()">Login</a>
        <a class="nav-link" *ngIf="(user | async)?.uid" (click)="logout()">Logout</a>
      </li>
    </ul>
    <div *ngIf="(user | async)?.uid">
        <img src="{{(user | async)?.photoURL}}" style="width:30px;height:30px;">
        <br> Email: {{(user | async)?.email}}
        <br> Name: {{(user | async)?.displayName}}
      </div>
  </div>
</nav>

【讨论】：