1
2
3
4
5
interface CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

该方法获取ActivatedRouteSnapshot＆的实例RouterStateSnapshot。我们可以使用它来访问route参数，query参数等。

Guard必须返回true / false或UrlTree。返回值可以采用可观察或承诺的形式，也可以采用简单boolean值的形式。

一条路线可以有多个canActivate警卫。

如果所有警卫都返回true，则将继续导航至该路线。

如果任何一名守卫返回false，导航将被取消。

如果任何一名警卫返回a UrlTree，则当前导航将被取消，并且新的导航将启动到UrlTree 从警卫返回的导航。

canActivate保护的例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuardService implements CanActivate {
    constructor(private _router:Router ) {
    }
    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): boolean {
        //check some condition  
        if (someCondition)  {
            alert('You are not allowed to view this page');
            //redirect to login/home page etc
            //return false to cancel the navigation
            return false;
        } 
        return true;
    }
}

canActivate如下所示，使用防护更新路由定义。您可以在一条路线上应用多个警卫，而一条路线可以有多个警卫

1
2
3
{ path: 'product', component: ProductComponent, canActivate : [AuthGuardService] },

CanActivate卫队示例

在示例应用程序中，我们将创建三个组件。在HomeComponent与ContactComponent不受保护，并且可以访问的任何用户。用户必须登录系统才能访问ProductComponent..我们还需要一个LoginComponent来处理用户登录。

LoginComponent

以下是LoginComponent与之相关的代码AuthService

login.component.ts
login.component.html
auth.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthService } from './auth.service';
@Component({
   templateUrl: './login.component.html',
   styles: [``]
})
export class LoginComponent implements OnInit { 
    invalidCredentialMsg: string;
    username:string;
    password:string;
    retUrl:string="home";
    constructor(private authService: AuthService, 
                private router: Router, 
                private activatedRoute:ActivatedRoute) {
    }
    ngOnInit() {
        this.activatedRoute.queryParamMap
                .subscribe(params => {
            this.retUrl = params.get('retUrl'); 
            console.log( 'LoginComponent/ngOnInit '+ this.retUrl);
        });
    }
    onFormSubmit(loginForm) {
       this.authService.login(loginForm.value.username, loginForm.value.password).subscribe(data => {
           console.log( 'return to '+ this.retUrl);
           if (this.retUrl!=null) {
                this.router.navigate( [this.retUrl]);
           } else {
                this.router.navigate( ['home']);
           }
       });
    }
} 

该AuthService检查是否允许用户登录。它具有login＆logout用户的方法。我们对该login方法的实现不进行任何检查。它只是将用户标记为已登录。

产品组件

该ProductComponent是我们的保护组件。只有登录的用户可以访问它。该组件显示从中获取的产品列表ProductService。

product.component.ts
product.component.html
product.service.ts
product.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Product } from './Product';
@Component({
  templateUrl: "product.component.html",
})
export class ProductComponent
{
   products:Product[];
   constructor(private productService: ProductService){
   }
   ngOnInit() {
      this.productService.getProducts()
        .subscribe(data => {
          this.products=data;
        })
   }
  }

其他成分

app.component.ts
app.component.html
home.component.ts
contact.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Routing Module - Route Guards Demo';
  constructor (private authService:AuthService, 
               private router:Router) {
  }
  logout() {
    this.authService.logoutUser();
    this.router.navigate(['home']);
  }
}

可以激活守卫

最后，我们构建了一个CanActivate防护，它将检查用户是否已登录。如果用户未登录，则将他们重定向到登录页面。

auth-guard.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot, UrlTree } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
    constructor(private router:Router, private authService: AuthService ) {
    }
    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): boolean|UrlTree {
        if (!this.authService.isUserLoggedIn()) {
            alert('You are not allowed to view this page. You are redirected to login Page');
                        this.router.navigate(["login"],{ queryParams: { retUrl: route.url} });
            return false;
            //var urlTree = this.router.createUrlTree(['login']);
            //return urlTree;
        } 
        return true;
    }
}

首先，我们CanActivate从@angular/router模块导入。

该AuthGuardService工具的CanActivate界面

AuthServce在Guard的构造函数中注入

在该CanActivate方法中，如果用户未登录，我们将重定向用户登录页面。要取消导航，我们必须返回false或urlTree如上例所示。

接下来，我们将更新路由定义，并在所有要保护的路由中使用保护功能

app.routes .ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Routes } from '@angular/router';
import { HomeComponent} from './home.component'
import { ContactComponent} from './contact.component'
import { ProductComponent} from './product.component'
import { AuthGuardService } from './auth-guard.service';
import { LoginComponent } from './login.component';
export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component:LoginComponent},
  { path: 'contact', component: ContactComponent },
  { path: 'product', component: ProductComponent, canActivate : [AuthGuardService] },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
];

最后，在中注册服务app.module。

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule }    from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent} from './home.component'
import { ContactComponent} from './contact.component'
import { ProductComponent} from './product.component'
import { AuthGuardService } from './auth-guard.service';
import { appRoutes } from './app.routes';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
import { ProductService } from './product.service';
@NgModule({
  declarations: [
    AppComponent,HomeComponent,ContactComponent,ProductComponent,LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [AuthGuardService,AuthService, ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行应用程序。如下图所示，只有登录后才能访问“产品”页面。

参考

CanActivate界面

路线守卫

CanActivateChild

来自 https://www.tektutorialshub.com/angular/angular-canactivate-guard-example/

Angular Route Guard中更好的重定向

了解如何在Angular路由防护中正确重定向

2018年11月29日 5分钟阅读

Angular 7.1版不仅提供了错误修复，还包括许多新功能。在本文中，我想特别介绍一下添加到路由守卫的优化。内容基于> = 7.1.0的Angular版本目录

这是Angular 7.1.0版中添加的功能的发行变更日志。

TL; DR：到现在为止所允许的路线警卫返回一个布尔值（或异步变体，如Promise<boolean>，Observable<boolean>）指示路由是否应该被激活。现在，您还可以返回一个UrlTree，该URL指示应激活的新路由器状态。

路线守卫-快速入门

什么是路线守卫？顾名思义，它们使您可以保护对特定路由的访问。通常的示例是您的应用程序的经过身份验证的区域之一，或者是需要访问特殊权限的管理部分。在下面的代码示例中，您将看到一个非常简单的可能的守护程序实现。

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn) {
      return false;
    } else {
      return true;
    }
  }
}

然后可以在Angular路线定义上注册它们，如下所示：

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard]
  }
];

注意，在谈论“防护”时，我总是提到这一点：客户端上不会发生安全性。相反，路由保护器（和其他机制）是UX功能，因为我们防止用户进入不允许其进入的区域。但是，最终的安全检查在服务器端进行！

封锁还不够

仅仅回来true还是false实际上还不够。我们需要告诉用户发生了什么。通过启动某些通知，或者最常见的是通过重定向到其他视图。

要实现这种使用，我们可以简单地将路由器注入AuthGuard并相应地重定向。

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

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn) {
      // redirect to some view explaining what happened
      this.router.navigateByUrl('/notauthorized');
      return false;
    } else {
      return true;
    }
  }
}

新：返回一个UrlTree

在Angular <= 7.1之前，从AuthGuard返回的唯一选项是布尔表达式：

export interface CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean;
}

从7.1版开始，我们现在还可以返回一个 **UrlTree**对象。

什么是UrlTree？该角文档描述了它如下：“由于路由器的状态是一棵树，而URL不过是一个序列化的状态下，URL是一个序列化的树。UrlTree是一种数据结构，在处理URL时提供了很多便利。

创建此类对象的最简单方法UrlTree是使用对象的parseUrl(…)或createUrlTree(…)函数Router。

router.parseUrl('/notauth');
this.router.createUrlTree(['/notauth']);

知道了这一点，我们可以将防护的原始实现更改为以下内容：

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

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn) {
      return this.router.parseUrl('/notauthorized');
    } else {
      return true;
    }
  }
}

好吧那又怎样这一切都与优先级有关！

从用户的角度来看，实际上没有任何变化。如果用户具有必要的权限，则该路由将被激活，否则，他/她将被重定向到“未授权”路由，并显示一些消息。区别在于Angular现在可以如何处理重定向并进行一些优化。

优先排序的主要优点是优先排序。使用旧的API，无法确定重定向的优先级。假设您有多个保护处于活动状态，正在执行异步验证并在发生故障时重定向。它完全取决于这些异步操作的执行时间：哪个异步防护调用了重定向，最后一个是获胜。通过现在返回UrlTree而不是直接运行重定向，Angular可以执行它并确保适当地确定可能正在运行的多个路由保护的优先级。优先级排序通过将最接近应用程序根的保护措施赋予最高优先级来进行。结果，如果儿童看守返回false或UrlTree但其父项尚未解决，它将等到父项解决。如果家长监护权检查失败，它将优先于所有其他检查。

导航取消另一个好处是可以取消所有其他导航事件。每当UrlTree从路线防护系统返回a时，Angular都会触发一个NavigationCancel事件，从而有效地取消所有正在运行的导航事件并启动到指示URL的新导航。

运行Stackblitz

另外，这是一个正在运行的Stackblitz示例。

结论

总结一下，我们已经了解了路由防护的全部内容，以及Angular v7.1中引入的新API如何使我们能够通过简单地返回一个UrlTree对象来重定向到新视图。这个微小的更改允许Angular进行两项主要优化：优先级划分和导航取消。

（感谢 Jason Aden 为我提供了一些有关添加此新API的新行为和动机的见解）

有什么问题吗有什么想法吗？在Twitter上打我

来自 https://juristr.com/blog/2018/11/better-route-guard-redirects/

普通分类:

angular

You are here

Angular CanActivate Guard示例有大用有大大用

Angular CanActivate Guard示例

什么是CanActivate Guard

CanActivate Guard的用例

如何使用CanActivate Guard

CanActivate卫队示例

LoginComponent

产品组件

其他成分

可以激活守卫

参考

Angular Route Guard中更好的重定向

了解如何在Angular路由防护中正确重定向

路线守卫-快速入门

封锁还不够

新：返回一个UrlTree

好吧那又怎样这一切都与优先级有关！

运行Stackblitz

结论

友情链接

搜索表单

用户登录

You are here

Angular CanActivate Guard示例 有大用 有大大用

什么是CanActivate Guard

CanActivate Guard的用例

如何使用CanActivate Guard

CanActivate卫队示例

LoginComponent

产品组件

其他成分

可以激活守卫

参考

Angular Route Guard中更好的重定向

了解如何在Angular路由防护中正确重定向

路线守卫-快速入门

封锁还不够

新：返回一个UrlTree

好吧那又怎样 这一切都与优先级有关！

运行Stackblitz

结论

友情链接

Angular CanActivate Guard示例有大用有大大用

好吧那又怎样这一切都与优先级有关！