首页 文章

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

提问于
浏览 次
1

What I'm using

  • Angular

  • Firebase

What I'm trying to achieve

  • 根据条件执行路由器重定向的Auth Guard

Where I've got to

  • 我在许多组件上都有一个auth防护，如果用户有一个书签（例如......）来记录并导航到它而未登录，它们将被推回到登录页面 .

Question

  • 是否可以修改我的auth guard，以便在用户登录时，但以某种方式设法导航到'www.mydomain.com/login'，它们被重定向到指定的路由？

My Route Guard

我已经把注释掉的代码留给了我尝试过的逻辑 . 这里的问题是，如果我使用注释掉的代码，如果用户没有登录，它最终会重定向回到你已经登录的登录页面 .

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


}

Example of auth guard on a route

理想情况下，我想在我的身份验证中使用一些逻辑，这意味着我可以在登录路线上执行相同的操作

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

UPDATE 感谢@Vega更近一点 . 现在发生了什么：

  • 登录页面>登录>重定向到正确的页面=太棒了！

  • 导航到登录之外的任何页面，但未登录=重定向回登录页面=太棒了！

  • 登录= Stuck时导航到登录屏幕 . 它现在认为用户没有登录=这需要修复

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;
      }
    }
  }
angular firebase angular-ui-router firebase-authentication angularfire2

1 回答

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

    Old answer:

    在主要组成部分：

    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;
    }
  }
    回复于

相关问题