如何在所有路线上应用canActivate警戒？

我有一个angular2主动防护装置处理，如果用户没有登录，把它重定向到登录页面：如何在所有路线上应用canActivate警戒？

import { Injectable } from "@angular/core"; 
import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; 
import {Observable} from "rxjs"; 
import {TokenService} from "./token.service"; 

@Injectable() 
export class AuthenticationGuard implements CanActivate { 

    constructor (
     private router : Router, 
     private token : TokenService 
    ) { } 

    /** 
    * Check if the user is logged in before calling http 
    * 
    * @param route 
    * @param state 
    * @returns {boolean} 
    */ 
    canActivate (
     route : ActivatedRouteSnapshot, 
     state : RouterStateSnapshot 
    ): Observable<boolean> | Promise<boolean> | boolean { 
     if(this.token.isLoggedIn()){ 
      return true; 
     } 
     this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url }}); 
     return; 
    } 
}

我要实现它就像每个路线：

const routes: Routes = [ 
    { path : '', component: UsersListComponent, canActivate:[AuthenticationGuard] }, 
    { path : 'add', component : AddComponent, canActivate:[AuthenticationGuard]}, 
    { path : ':id', component: UserShowComponent }, 
    { path : 'delete/:id', component : DeleteComponent, canActivate:[AuthenticationGuard] }, 
    { path : 'ban/:id', component : BanComponent, canActivate:[AuthenticationGuard] }, 
    { path : 'edit/:id', component : EditComponent, canActivate:[AuthenticationGuard] } 
];

有任何更好的方法来实现canActive选项而不必将其添加到每个路径。

我想要的是将其添加到主路线上，并且它应该适用于所有其他路线。我已经搜索了很多，但我无法找到任何有用的解决方案

感谢

来源

2017-04-19 Nimatullah Razmjo

您可以引入一个componentless父路由和应用有门卫：

const routes: Routes = [ 
    {path: '', canActivate:[AuthenticationGuard], children: [ 
     { path : '', component: UsersListComponent }, 
     { path : 'add', component : AddComponent}, 
     { path : ':id', component: UserShowComponent }, 
     { path : 'delete/:id', component : DeleteComponent }, 
     { path : 'ban/:id', component : BanComponent }, 
     { path : 'edit/:id', component : EditComponent } 
    ]} 
];

来源

2017-04-19 06:24:49

谢谢，它现在的作品 –

很高兴听到:)感谢您的反馈。 –

@GünterZöchbauer我总是阅读你的建议。非常感谢你！！但在我的情况下，这是行不通的。 CanActive不适用于儿童之间的路由。我使用canActivateChild。有用。 – Smiranin

我想你应该实行“孩子路由“让你有一个父母（例如路径”admin“）和他的孩子。

然后，您可以将canactivate应用于父母，该父母将自动限制对其所有孩子的访问。例如，如果我想访问“admin/home”，我需要浏览canActivate保护的“admin”。你甚至可以定义一个父路径为空的“”“如果你想

来源

2017-04-19 06:31:52 Simrugh

我在搜索时遇到了这个例子，并被例子中给出的例子所捕获。

如果您想显示子路由，您需要确保警卫返回true。

@Injectable() 
export class AuthenticationGuard implements CanActivate { 

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

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

     // Auth checking code here 

     // Make sure you return true here if you want to show child routes 
     return true; 
    } 
}

来源

2018-02-21 13:03:00 CountZero

您也可以订阅你app.component的ngOnInit功能的路由器的路由变化，并从那里例如检查认证

this.router.events.subscribe(event => { 
     if (event instanceof NavigationStart && !this.token.isLoggedIn()) { 
      this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url}}); 
     } 
    });

我更喜欢这种在路由更改时进行任何类型的应用程序范围检查的方式。

来源

2018-02-22 11:45:46

如何在所有路线上应用canActivate警戒？

回答

相关问题