时间戳

首页 > 解决方案 > Angular 6 - 基于firestore节点值的Route Guard

angular - Angular 6 - 基于firestore节点值的Route Guard

问题描述

我目前正在使用 Firestore 构建一个 Angular 项目。我有一个users集合，其中包含用户uid以及他们的姓名、电子邮件和公司名称。登录后，我可以成功获取用户 uid，在 firestore 中查找文档，然后将它们重定向到domain.com/theircompanyname-theircompanyname即存储在 firestore 中用户集合 > 文档下的内容。

但是，目前这并不能阻止任何人在 URL 中输入公司名称并成功导航到该 URL。我将如何实施一个路由保护，它只授予与 url 中可见的匹配公司的用户访问权限？

登录.ts

login(email: string, password:string) {
  this.afAuth.auth.signInWithEmailAndPassword(email, password).then(value => {
      const user_id = value.user.uid;
      this.userService.checkUserForCorrectRedirect(user_id)
  });
}

user.service.ts 这将根据他们在firestore中的公司名称将用户重定向到适当的URL（我通过将user_id从登录传递到此函数来检查）

checkUserForCorrectRedirect(user_id: string) {
   var docRef = this.db.collection("users").doc(`${user_id}`);

   docRef.get().then((doc) => {
    if (doc.exists) {
        const data = doc.data();
        this.company = data.company;
        this.router.navigate(['e', data.company]);
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
 }).catch((error) => {
    console.log("Error getting document:", error);
 });
}

以上所有工作。如果可能的话，路线守卫是我需要帮助的地方。

router.guard 这显然不起作用，我真的不知道如何使它起作用。

 import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';
import { UserService } from '../services/user.service';

@Injectable()

export class AuthGuardService implements CanActivate {

    authGuardStateURL: string;

    constructor(
        private router: Router,
        private userService: UserService,
    ) { }



    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        if (this.userService.company == "testcompany") {
            return true;
        } else {
            return false;
        }
    }

    }

标签： angulargoogle-cloud-firestoreangular-route-guards

解决方案

我认为正确的方法是在您的 Firestore 数据库中创建规则，以确保它是安全的。我使用规则做了我的，检查用户是否拥有公司，并授予读取权限

推荐阅读