- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
要允许访问管理路由,我必须检查两件事:
管理 guard
import {ActivatedRouteSnapshot, CanActivate, Router,
RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {AngularFireAuth} from 'angularfire2/auth';
import {Injectable} from '@angular/core';
import {DbActionsService} from '../services/db-actions.service';
import {AuthService} from '../services/auth.service';
import 'rxjs/add/operator/map';
@Injectable()
export class AdminGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth, private router: Router, private dbAction: DbActionsService, private authService : AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
if (this.afAuth.auth.currentUser) {
return this.dbAction.getUserProfileData(this.afAuth.auth.currentUser.email).map((user) => {
if (user[0].admin) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
}).take(1)
} else {
this.router.navigate(['/']);
}
}
}
服务功能
getUserProfileData(userEmail: string) {
this.dataRef = this.afDatabase.list('data/users', ref => ref.orderByChild('profile/email').equalTo(userEmail));
this.data = this.dataRef.snapshotChanges().map(changes => {
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});
return this.data;
}
这工作正常,但是,我的主要问题是当我刷新(或最初加载)具有 AdminGuard 的页面时,它总是将我重定向到主页,因为 AdminGuard 不等待身份验证响应。
一个新的 AuthService
import { Injectable } from '@angular/core';
import {AngularFireAuth} from 'angularfire2/auth';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class AuthService {
private user: any;
constructor(private afAuth: AngularFireAuth) { }
setUser(user) {
this.user = user;
}
getAuthenticated(): Observable<any> {
return this.afAuth.authState;
}
}
新的 AdminGuard
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {AngularFireAuth} from 'angularfire2/auth';
import {Injectable} from '@angular/core';
import {DbActionsService} from '../services/db-actions.service';
import {AuthService} from '../services/auth.service';
import 'rxjs/add/operator/map';
@Injectable()
export class AdminGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth, private router: Router, private dbAction: DbActionsService, private authService : AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
return this.authService.getAuthenticated().map(user => {
this.authService.setUser(user);
return user ? true : false;
});
}
}
这在初始加载时与 Auth Check 一起工作,但我如何实现数据库条件来检查用户是否是管理员?我不知道...
最佳答案
这是一个应该根据您的代码工作的守卫,让我们分解一下:
authState
可观察。switchMap
以切换到您想要的可观察数据库数组。import { tap, map, switchMap, take } from 'rxjs/operators;
// ...omitted
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
return this.afAuth.authState.pipe(
take(1),
switchMap(user => {
return this.dbAction.getUserProfileData(user.email)
}),
map(profile => !!(profile.length && profile[0].admin),
tap(isAdmin => {
if (isAdmin) {
console.log('admin user, you shall pass')
} else {
console.log('non-admin user, go home')
this.router.navigate(['/']);
}
})
)
}
我已经用 Angular/Firebase 完成了许多保护实现,并且对什么最有效有一些看法 - 我认为这个 role based auth screencast可能会帮助您改进当前的方法
关于Angular AuthGuard - 按顺序检查身份验证和数据库条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48548195/
我有一个 AuthGuard.service.ts 的代码如下。 import { Injectable } from '@angular/core'; import { ActivatedRoute
我想通过检查用户是否从服务器登录但异步函数未执行来保护我的路由 这是我的代码: canActivate (route: ActivatedRouteSnapshot , state: RouterSt
我正在使用 Angular CanActivate Authguard 接口(interface)来保护我的组件。 @Injectable() export class AuthGuard imple
要允许访问管理路由,我必须检查两件事: 如果用户通过身份验证 如果此用户是管理员。我从 firebase 数据库获取管理状态。 管理 guard import {ActivatedRouteSnaps
我在这里阅读了指南:https://angular.io/docs/ts/latest/guide/router.html 看起来很简单,但是,我不确定如何在 auth guard (canActiv
我想创建一个路由防护来保护路由免受未经授权的用户的侵害。 我正在使用 jsonwebtoken 进行授权,目前将其存储在 localStorage 中。 我的想法是,当用户想要访问 protected
我使用 ngx admin 创建使用 nebular 的管理面板,我按照此文档添加 authGard: docs 这用于自定义登录: docs2 所有事情都正常,我收到成功消息: 但我在 autoga
I'm loading a books module with the following routing configuration (src/app/index.ts) -- 请注意,这是一个 s
我正在尝试在 Angular 5 中创建条件路由,我已经看到了这篇文章和 Angular 的官方里程碑页面: Angular2 conditional routing 。 但是我没有找到根据输入变量创
页面刷新后,身份验证似乎不会持续存在。每当我登录时,它都会成功重定向我。但是,当我刷新时,无法再访问。 这是auth guard 路由器 import { BrowserModule } from '
我的应用程序将使用两种不同的身份验证策略 - 一种针对使用浏览器的用户,另一种针对公共(public) API。我将为使用浏览器的用户设置一个 header,然后我的应用程序将根据该 header 的
有没有办法在 authguard 中使用相对路径模式进行重定向? 我试过 @Injectable() export class ServerAuthGuard implements CanActiva
我有这个 AuthGuard: export class AuthGuard implements CanActivate { constructor (private router: Route
尝试遵循此处提供的 AuthGuard 示例: http://www.sparkbit.pl/angular-2-route-guards-real-life-example/ 不幸的是,在尝试实现
在模板组件中AppComponent ,根据值,变量 this.loggedInService.isLoggedIn在 logIn() 之间切换和logout()方法,在应用程序组件 AppCompo
我正在开发一个 Angular 应用程序,它具有以下URL路径, /(根目录) /类(class) /类(class)/创建 /类(class)/:id /验证/登录 我已为除 auth/login
我有一个 ionic 4 应用程序,它本地存储有关用户的信息。当用户打开应用程序时,如果他的信息在那里,那么我希望将他发送到主页。如果他不是,那么我希望他被路由到登录页面,这很正常。 我遇到的问题是,
使用 ASP.NET Core API 应用程序登录到 Angular 应用程序后,出现以下错误 Error: Uncaught (in promise): Error: StaticInjector
我想这是一个很简单的问题,但不幸的是我真的不知道如何处理它。 我正在尝试将我的 UserAuthenticationService 服务与 ActivationGuard 连接。 UserAuthen
我想在以 Angular 授予对特定路由的访问权限之前提供服务器端身份验证。 我有一个实现 CanActivate 的 AuthGuard 和一个服务 AuthService。authService
我是一名优秀的程序员,十分优秀!