Angular＆Firebase - 可以创建一个auth警卫来检查用户是否在登录屏幕上？

Question

我使用的是什么

• 角
• 火力地堡

我试图实现

• 的验证卫队进行基于路由器重定向条件

当我得

• 我有一个权威性后卫很多，如果用户有一个书签的组件（例如...），以URL，然后导航到它，而不是登录后，他们将被推回到登录页面。

问题

• 是否可以这样，如果用户登录修改我的身份验证后卫，但还是设法导航到“www.mydomain.com/login”，他们是重定向到指定的路线？

我的路线警卫

我已经离开我的注释掉的代码在那里我已经尝试了一些逻辑。这里的问题是，如果我使用注释掉的代码，如果用户没有登录，它将以一个重定向到您已经登录的登录页面的循环结束。

import { Injectable } from '@angular/core'; 
 
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router'; 
 
import { AuthService } from './auth.service'; 
 

 

 
//testing 
 
import { Observable } from 'rxjs/Observable'; 
 
import { AngularFireAuth } from 'angularfire2/auth'; 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/operator/take'; 
 
import 'rxjs/add/operator/do'; 
 

 
@Injectable() 
 

 
export class AuthGuardService implements CanActivate { 
 

 
    constructor(
 
    private authService: AuthService, 
 
    private router: Router, 
 
    private auth: AngularFireAuth 
 
) { } 
 

 

 

 

 
    canActivate(): Observable<boolean> { 
 

 
    return this.auth.authState 
 
     .take(1) 
 
     .map(authState => !!authState) 
 
     .do(auth => !auth ? this.router.navigate(['/login']) : true); 
 
    
 
    } 
 

 

 

 
    // canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
 
    // return this.checkLoggedIn(state.url); 
 
    // } 
 

 
    // checkLoggedIn(url: string) { 
 

 
    // if (this.authService.isLoggedIn()) { 
 
    //  console.log("yup, i'm logged in!"); 
 
    //  return true; 
 
    // } else { 
 
    //  this.router.navigate(['/login']); 
 
    //  console.log("nop, i'm not logged in!"); 
 
    //  return false; 
 
    // } 
 
    // } 
 

 

 
}

的路径上AUTH后卫例

在理想情况下，我想在我的身份验证后卫一些逻辑这意味着我可以做下同登录路线上

{ 
 
     path: 'folders', 
 
     component: FolderListComponent, 
 
     resolve: { folderListData: FolderListResolver }, 
 
     canActivate: [AuthGuardService] 
 
    },

UPDATE 感谢@Vega，感谢您。现在发生了什么：

• 登录页面>登录>重定向到正确的页面=太棒了！
• 导航到除登录外的任何页面，但未登录=重定向回登录页面=太棒了！
• 在登录时导航到登录屏幕=卡住。现在认为用户没有登录=这需要固定

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
 
    let newUrl = state.url; 
 
    if (newUrl === "/login") { 
 
     if (this.authService.isLoggedIn()) { 
 
     console.log('Login Page/Signed In'); 
 
     return false; 
 
     } 
 
     else { 
 
     console.log('Login Page/Not Signed In'); 
 
     return true; 
 
     } 
 
    } 
 
    else { 
 
     if (this.authService.isLoggedIn()) { 
 
     console.log('Other Page/Signed In'); 
 
     return true 
 
     } else { 
 
     this.router.navigate(['/login']); 
 
     console.log('Other Page/Not Signed In'); 
 
     return false; 
 
     } 
 
    } 
 
    }

Answer 1

UPDATE： 这可能是不是更优雅的方式，但它的工作原理，以及较少代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    let newUrl = state.url; 
    if (newUrl === "/login") { 
     if (this.authService.loggedIn()) { 
     //this.router.navigate([oldUrl]); 
     //logged and routing to /login => go back. this probably need to be improved! 
     this.location.back(); 
     return false 
     } 
     else { 
     //not logged => go /login 
     return true 
     } 
    } 
    // here is the 'traditional' part of the guard 
    else { 
     if (this.authService.loggedIn()) { 
     return true 
     } else { 
     this.router.navigate(['/login']); 
     return false; 
     } 
    } 
    } 

老答案：

在主要成分：

ngOnInit() { 

     if (isPlatformBrowser) { 
      this.routerSubscription = this.router.events 
       .filter(event => event instanceof NavigationEnd) 
       .subscribe(() => { 
        let url = window.location.toString(); 
        if (url.indexOf("/login") && loggedIn) 
         //do whatever is necessary 
        } 
        else{ 
         this.router.navigate(['login']); 
       } 
       }); 
     } 
    } 

    ngOnDestroy() { 
     this.routerSubscription.unsubscribe(); 
    } 

或者类似如下：

{ path: 'login', component: LoginComponent, canActivate: [AnOtherGuard] }, 

和

在AnOtherGuard

.... 
canActivate() { 
    if (this.authService.loggedIn()) { 
     this.location.back(); //or whatever is necessary 
     return false; 
    } 
    else { 
     return true; 
    } 
    }