带有重定向的Angular 2 AuthGuard服务？

Question

我正在构建一个在仪表板路由上实现 CanActivate 的应用程序。它工作正常，除了页面重新加载，我检查用户服务中的标志以查看用户是否登录。默认情况下，此标志为 false，将用户踢出登录。同样在页面重新加载时，我试图在 localStorage 中使用令牌获取用户数据，如果获取成功，我希望他们能够留在仪表板上。问题是我看到了登录的一瞥，并且不得不手动将它们重定向到仪表板。有没有办法解决这个问题，直到它检查 API 之后 authGuard 才做任何事情？代码在这里：https://github.com/judsonmusic/tfl

仪表板：

import { Component, ViewChild } from '@angular/core';
import { LoginComponent } from "../login.component";
import { UserService } from "../user.service";
import { SimpleChartComponent } from "../charts/simpleChart.component";
import { AppleChartComponent } from "../charts/appleChart.component";
import { BarChartComponent } from "../charts/barChart.component";
import { DonutChartComponent } from "../charts/donutChart.component";
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';
import { ModalDemoComponent } from "../modals/modalDemoComponent";
import { NgInitHelperComponent } from "../helpers/nginit.helper.component";
import { ModalDirective } from "ng2-bootstrap/ng2-bootstrap";
import { MODAL_DIRECTIVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';


@Component({
  selector: 'dashboard',
  templateUrl: '/app/components/dashboard/dashboard.component.html',
  providers: [UserService, BS_VIEW_PROVIDERS],
  directives: [SimpleChartComponent, AppleChartComponent, BarChartComponent, DonutChartComponent, AlertComponent, ModalDemoComponent, NgInitHelperComponent, ModalDirective]
})
export class DashboardComponent  {

  public areas: any;

  constructor() {

    this.areas = [
      "Spiritual",
      "Habits",
      "Relationships",
      "Emotional",
      "Eating Habits",
      "Relaxation",
      "Exercise",
      "Medical",
      "Financial",
      "Play",
      "Work/ Life Balance",
      "Home Environment",
      "Intellectual Well-being",
      "Self Image",
      "Work Satisfaction"
    ]

  }
}

路线：

import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './components/about.component';
import { PageNotFoundComponent } from "./components/pageNotFound.component";
import { HomeComponent } from "./components/home.component";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { SurveyComponent } from "./components/survey/survey.component";
import { ResourcesComponent } from "./components/resources.component";
import { LogoutComponent } from "./components/logout.component";
import { AuthGuard } from "./components/auth-guard.service";
import { loginRoutes, authProviders } from './login.routing';
import { LoginComponent } from "./components/login.component";

const appRoutes:Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'logout', component: LogoutComponent },
  { path: 'resources', component: ResourcesComponent },
  { path: 'survey', component: SurveyComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [
  authProviders
];
export const routing = RouterModule.forRoot(appRoutes);

登录路径：

import { Routes }         from '@angular/router';
import { AuthGuard }      from './components/auth-guard.service';
import { AuthService }    from './components/auth.service';
import { LoginComponent } from './components/login.component';
export const loginRoutes: Routes = [
  { path: 'login', component: LoginComponent }
];
export const authProviders = [
  AuthGuard,
  AuthService
];

Answer 1

在AuthGuard 中执行以下操作：

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    if (/*user is logged in*/) {
      this.router.navigate(['/dashboard']);
      return true;
    } else {
      this.router.navigate(['/Login']);
    }
    return false;
  }
}

Answer 2

以下是如何使用 UrlTree 在警卫中正确处理重定向

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
  constructor(
    private authService: AuthService,
    private logger: NGXLogger,
    private router: Router
  ) {}

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.isLoggedIn().pipe(
      map(isLoggedIn => {
        if (!isLoggedIn) {
          return this.router.parseUrl('/login');
        }

        return true;
      })
    );
  }
}

非常感谢Angular In Depth 的解释！

Answer 3

您现在可以从 AuthGuard 返回 UrlTree，或布尔值 true / false。

有点惊讶还没有人提到这个！抱歉，目前没有示例，但想法很简单。

Answer 4

我实际上将我的服务更改为这个并且它有效：

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

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router, private userService: UserService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {



    if (this.authService.isLoggedIn){
      console.log('ATUH GUARD SAYD THEY ARE ALREADY LOGGED IN!');
      return true;


    }else {


      this.userService.getUser().subscribe((user) => {

        console.log('AUTH GUARD GETTING USER', user);

        if (user._id) {
        this.authService.isLoggedIn = true;
        // Store the attempted URL for redirecting
        this.authService.redirectUrl = state.url;
        this.router.navigate(['/dashboard']);
        return true;
        }else{
          console.log('Validation Failed.');
          localStorage.clear();
          this.router.navigate(['/login']);
          return false;
        }


      }, (error) => {
        console.log('There was an error.');
        this.router.navigate(['/login']);
        return false

      });

    }


  }
}

Answer 5

我这样解决了它并在我的 AuthGuard 中使用它

isLoggedIn(): Observable<boolean> {
return this.afAuth.authState
  .pipe(
    take(1),
    map(user => {
        return !!user;
      },
      () => {
        return false;
      }
    ),
    tap(loggedIn => {
        if (!loggedIn) {
          this.router.navigate(['/']);
        }
      }
    ));
}

Answer 6

这就是我为canActivate所做的

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // ensure the user is properly logged in and the url he's requesting is within his right
    if (this.authSvc.getRole().trim().length > 0 && this.authSvc.getToken().trim().length > 0
      && state.url.includes(this.authSvc.getRole().trim())) {
      let url: string;
      // base on user's role send to different url to check
      if (this.authSvc.getRole().trim() === 'client') {
        url = ClientAccessRequestUrl;
      } else {
        url = AdminAccessRequestUrl;
      }
      return this.http.post<AccessRequestResponse>(url, {
        token: this.authSvc.getToken(),
      }).pipe(map(response => {
        console.log('response is:', response);
        // check successful then let go
        if (response.reply === true) {
          return true;
          // unless go to visitor site
        } else {
          return this.router.createUrlTree(['/visitor']);
        }
      }));
    } else {
      return this.router.createUrlTree(['/visitor']);
    }
  }

Answer 7

身份验证后进行重定向的最佳方法是构造如下所示的逻辑；

1. 在 AuthGuard 中，

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
    {

      // keep the requsted url for redirect after login
      let url: string = state.url;

      // call the authentication function
      var authenticated = this.http.isAuthenticated();
      
      var subject = new Subject<boolean>();

      authenticated.subscribe(

      (res) => {
        //if not authenticated redirect to the login route with the initial route attached as an query param 'returnUrl'
        if(!res.successState) {
          this.router.navigate(['/login'], {queryParams: {returnUrl: url}});
        }else{

        // the user is authenticated just go to the requested route

          subject.next(res.successState);

        }

      });

      return subject.asObservable();

    }

1. 在登录路径中

  loginAction(data: any){
    // if the auth works fine the go the route requested before the inconviniences :)
    if(data.successState){

    // get the query params to see if there was a route requested earlier or they just typed in the login route directly
    this.route.queryParams.subscribe(params => {
      // console.log(params); //returnUrl

      if(params.returnUrl){

        // pearse the url to get the path and query params
        let urlTree: UrlTree = this.router.parseUrl(params.returnUrl);
        let thePathArray : any[] = [];
        // populate it with urlTree.root.children.primary.segments[i].path;
        for(let i = 0; i < urlTree.root.children.primary.segments.length; i++){
          thePathArray.push(urlTree.root.children.primary.segments[i].path);
        }
        let the_params = urlTree.queryParams;

        this.router.navigate(thePathArray, {queryParams: the_params});

      }else{

        this.router.navigate(['']);

      }
    });

    }else{
    // tell them about it and let them try again or reset the password 
    }

 }

这应该可以完美运行。它甚至会保留初始请求的查询参数。

谢谢