在角度2中的路线卫兵

Tavish Aggarwal.

 

H

我们将讨论如何在角度工作中的路线守卫。

 

假设在角2个应用程序中我们有几条路线,其中一些路由暴露了一些高度机密数据。您是否希望公开公开出行这种类型的路线?

考虑另一种方案,您可以在其中提供可以在应用程序中执行所有曲线操作的管理路由。我相信你不希望任何人搞砸你的组件。解决方案是使用警卫保护您的路由,以便只有授权的个人只能访问您的路由。

以上是您需要配置警卫的日常情况。除此之外,还可以存在其他场景,在那里您需要在路由上配置防护装置:

  • 当我们在显示目标组件之前需要获取某些数据时。
  • 当我们在离开组件之前需要保存挂起的更改时
  • 当我们有时需要询问北京快3app如果可以丢弃待更改而不是保存它们。

现在我们有一个基本的理解为什么我们需要在应用程序中配置路由警卫。让我们开始了解更多关于警卫以及如何在我们的应用程序中配置它们。 

让我们看看我们在角度的不同类型的警卫,看看如何在Angular应用程序中配置它们。

保护类型

我们可以使用四种不同的保护类型来保护我们的路线:

  1. Canactivate - 决定是否可以激活路线
  2. CanactivaTechild - 决定是否可以激活路线的子路线
  3. CanceActivate - 决定是否可以停用路由
  4. canload - 决定是否可以懒惰地加载模块
  5. 在路由激活之前,决定 - 要执行路由数据检索。

我们可以为我们的路线配置一个或多个后卫。

路由上配置的后卫总是返回True或False。

  1. 如果警卫返回true,则将北京快3app导航到请求的路由。
  2. 如果Guard返回False,则未导航北京快3app

路由防护可以返回可观察到的<boolean> or a Promise<boolean>路由器将等待Abseralable解析为TRUE或FALSE。

Canactivate.

一个非常简单的警卫看起来如下所示:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable()
export class MyFirstGuard implements CanActivate {

     canActivate() {
         console.log('My route is protected with guards');
         return true;
     }
}

上述GUARD表明Canactivate Guard的简单使用。这里在上面的后卫中,我们只是返回“真”,以便北京快3app已导航到页面。在实际应用中,我们可以与守卫有更多。

如何使用我们在上面创建的警卫?

只需将其添加到下面显示的“路由”文件A:

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


现在,只要北京快3app尝试访问/管理员北京快3app需要传递我们在MyFirstguard Guard中的验证。 (在我们的情况下,我们直接返回true,因此它可以直接访问)。

此外,我们需要在“App.Module.ts”文件中以提供商注册我们的警卫。

有一种方案,开发人员希望在警卫中返回布尔的异步验证(服务请求)。卫兵也可实现。

例如: 如果我们需要通过调用服务检查北京快3app的访问,我们也可以执行此操作。

CanactivaTechild. 

CanactivaTechild Guard类似于Canactivate Guard。关键区别在于它在激活任何子路由之前运行。

例如: 在上面的情况下,我们在Canactivate Guard的帮助下保护了管理路由,但如果管理路由中有子路由,则何于该。喜欢:/ admin / createUser我们肯定想要保护。我们可以通过CanactivateChild Route Guard的帮助来实现这一点。

我们也可以扩展我们的MyFirtGuard本身,以保护我们的儿童路线。请按照下面显示的示例:

import { Injectable } from '@angular/core';
import { CanActivate,CanActivateChild } from '@angular/router';

@Injectable()
export class MyFirstGuard implements CanActivate {

       canActivate(): boolean {
            console.log('My route is protected with guards');
            return true;
       }

        canActivateChild(): boolean {
              console.log('Protecting child routes as well');
              return true;
         }
}

现在我们需要将子路线添加到我们的管理路线,以查看CanactivAteChild In Action:

const routes: Routes = [ 
     { path: 'home', component: HomeComponent }, 
     { path: 'admin', component: AdminComponent, canActivate: [MyFirstGuard],
           children: [
              { path: 'update', component: UpdateDetailsComponent, canActivateChild: [AuthGuard] } 
           ] 
      } 
];

CanceActivate.

随着名称建议,其功能与Canactivate的功能相反。当北京快3app即将离开路线时执行它。考虑一个如下图所示,以更好的方式了解其用例:

假设我们有一个大形式,北京快3app正在填写表格并意外北京快3app取消或点击后退按钮(或者任何将导航他的操作远离表格)。然后,北京快3app填充的整个数据将丢失。但是,如果我们启用了CandeActivate Guard,它将帮助北京快3app在导航之前确认,因此保存他的时间和精力再次填补表格。

现在我们对CandeActivate Guard的理解让我们看看它的代码。

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { AdminComponent } from './admin/AdminComponent';

@Injectable()
export class MyDeactivateGuard implements CanDeactivate<AdminComponent> {                                                                            canDeactivate(component: AdminComponent)  {
                 return component.confirmRedirect();
          }
}

正如我们可以看到的代码与Canactivate Guard非常类似,但有一些变化,如CandeageCtive需要将被激活为参数的组件。

加拿大

正如我们之前所见,我们使用Canactivate Guard来限制未经授权北京快3app的访问,但如果北京快3app无法访问该路由,则可以使用CANLoad Guard来防止应用程序加载整个模块。

让我们在一个例子的帮助下在行动中看到这一点:

const routes: Routes = [
      { path: 'admin', loadChildren: 'app/admin.module#AdminModule', canLoad: [MyFirstGuard] }
];

在上面的示例中,如果authguard返回true,则只加载在应用程序中的adminmodule。

解决

假设我们有一条路线从RESTful终点(服务)中拉动数据,并且只有在服务状态是成功时,我们才只想才能路由北京快3app。然后解决路线可以帮助我们。所以基本上是什么解析路由所做的是,它在导航到路由之前预加载数据。

我会说的是,当您希望延迟路线直到时间组件数据准备就绪,我们应该使用解析路由。

resolve(route: ActivatedRouteSnapshot): Observable<any> {

             let id = route.params['id'];
             return this.getUser(id) .map(data => {
                       if(data) {
                             return user;
                        } else {
                              this.router.navigate(['/details']); 
                               return false;
                         }
               }) 
}

在上面的示例中,我们正在调用Service GetUser(),如果响应是我们正在导航的成功,但如果响应是我们将北京快3app重定向到详细信息页面的失败。

我希望这篇文章有助于你深入了解路线卫兵。保持关注即将到来的帖子。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal.是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别