大佬教程收集整理的这篇文章主要介绍了角色2 AuthGuard Firebase认证,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是AuthGuard服务:
import { Injectable } from '@angular/core'; import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router'; import { Authservice } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(private Authservice: Authservice,private router: Router) {} canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) { if (this.Authservice.loggedIn) { return true; } this.router.navigate(['login']); return false; } }
这是Authservice,它检查用户的登录,并将结果绑定到其构造函数中的“loggedIn”属性.
import { Injectable } from '@angular/core'; import { AngularFire } from 'angularfire2'; import { Router } from '@angular/router'; @Injectable() export class Authservice { loggedIn: Boolean = false; constructor( public af: AngularFire,public router: Router) { af.auth.subscribe(user => { if(user){ this.loggedIn = true; } }); } }
这里的问题显然是不同步的. AuthGuard的canActivate()总是返回一个false值,因为订阅没有及时收到数据,将“loggedIn”更改为true.
解决这个问题的最佳做法是什么?
编辑:
更改了AuthGuard返回一个可观察值.
canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) { return this.af.auth.map((auth) => { if (!auth) { this.router.navigateByUrl('login'); return false; } return true; }); }
它的作品,因为你没有被重定向到登录…但目标AuthGuarded组件没有渲染.
不知道是否与我的app.routes有关.这是该部分的代码:
const routes: Routes = [ { path: '',component: MainComponent,canActivate: [AuthGuard] },... ]; export const routIng = RouterModule.forRoot(routes);
import {ObservablE} from "rxjs/Observable"; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/take'; canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) { return this.af.auth.map((auth) => { if (!auth) { this.router.navigateByUrl('login'); return false; } return true; }).take(1); }
以上是大佬教程为你收集整理的角色2 AuthGuard Firebase认证全部内容,希望文章能够帮你解决角色2 AuthGuard Firebase认证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。