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; 
    } 
    }