javascript - Angular 4 : Authguard(canActivate) in not blocking the url as it should, 破坏应用程序阻止一切，控制台/浏览器中不会抛出任何错误

Question

我创建了此 authguard，但在用户注销时不会阻止路由。应用程序身份验证工作流程工作正常，我在后端的数据库上使用传统 session ，我使用 Augury 扩展通过 chrome 验证了身份验证服务的状态，并且身份验证状态设置可以通过不同的操作设置，因此问题不存在。

这是我的auth-guard.service.ts服务:

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


@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
     return this.authService.isAuthenticated().map(isAuth => {
       console.log('is authenticated',isAuth);
            if (isAuth) {
                return true;
            }else{
                this.router.navigate(['/signin']);
                return Observable.of(false);
            }
        }).catch(() => {
            return Observable.of(false);
        });;
  }
}

这是我的authService，其方法是isAuthenticated()，auth守卫使用该方法来阻止或不阻止路由(我使用publishReplay捕获authState 5次以保存一些请求因为我没有找到更好的方法来检查用户身份验证状态，所以我只是执行一个查询，如果后端的身份验证防护不拒绝它，那么这意味着 session 仍然处于事件状态，返回代码 200:

import { Injectable, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable, Subject} from "rxjs/Rx";

@Injectable()
export class AuthService implements OnInit {
 userIsAuthenticated = new Subject();
  constructor(private router: Router, private http: Http) { }

  private getHeaders(){
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('Accept', 'application/json');
      headers.append('Authorization','Bearer');
      return headers;
  }

  ngOnInit(){
    //it starts as false to check with the server if the user is authenticated
    this.userIsAuthenticated.next(false);
  }

  isAuthenticated(): Observable<boolean> {

      let options = new RequestOptions({ headers: this.getHeaders(), withCredentials: true });
      return this.http.get('http://someurl/api/sponsor/check/login',options)
        .map(response => {
          let res = response.json();
          console.log("response");
          if (res.code == 200) {
            this.userIsAuthenticated.next(true);
            return true;
          } else {
            this.userIsAuthenticated.next(false);
            return false;
          }
        }
      ).publishReplay(5);

  }



}

这是我的路由文件:

import { NgModule }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth-guard.service';
import { SigninComponent } from './auth/signin/signin.component';
import { SignupComponent } from './auth/signup/signup.component';
import { MainComponent } from './main/main.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ActiveCampaignsComponent } from './dashboard/active-campaigns/active-campaigns.component';
import { HistoryCampaignsComponent } from './dashboard/history-campaigns/history-campaigns.component';
import { OverviewCampaignsComponent } from './dashboard/overview-campaigns/overview-campaigns.component';
const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch:'full'},
  { path: '', component: MainComponent },
  { path: 'signin', component:SigninComponent},
  { path: 'signup', component: SignupComponent},
  { path: 'dashboard', canActivate:[AuthGuard],component: DashboardComponent,
    children: [
      { path: '', redirectTo:'dashboard/overview', pathMatch: 'full'},
      { path: 'overview', component: OverviewCampaignsComponent },
      { path: 'active', component: ActiveCampaignsComponent},
      { path: 'history', component: HistoryCampaignsComponent}
    ] }

]

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

export class AppRoutingModule{

}

正如您所看到的，仪表板路由正在实现此身份验证防护，但它不会阻止任何内容，并且如果我添加该行，它会出现意外行为，阻止所有链接(发生这种情况时我会注销并尝试通过 url 访问仪表板路由，它破坏了应用程序，但在控制台中看不到错误，链接在执行此操作后没有响应)。似乎有什么问题？谢谢!!

Answer 1

我认为你忘记将你的守卫添加到AppModule中的Providers数组中，还在组件名称后添加canActivate，你应该有上面类似的代码。(这可能是为什么你的 Guard 不保护仪表板路由的问题。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'dashboard', 
        component: DashboardComponent,
        canActivate:[AuthGuard],
      }
    ])
  ],
  providers: [AuthGuard]
})
class AppModule {}