欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

Angular CanActivate Guard示例

在导航到允许取消导航的路线之前,将运行Angular CanActivate保护器。在本教程中,我们将学习什么是CanActivate防护以及如何使用它来保护路线。我们将构建一个简单的CanActivate示例应用程序,向您展示如何在实际应用程序中使用它

适用于:角度2,角度4,角度5,角度6,角度7,角度8,角度9。

什么是CanActivate Guard

Angular CanActivate保护器确定a是否route可以激活(或渲染组件)。当我们想要检查某些条件时,可以在激活组件或向用户展示之前使用此防护器。这使我们可以取消导航。

CanActivate Guard的用例

  • 检查用户是否已登录

  • 检查用户是否具有权限

此防护的用例之一是检查用户是否已登录到系统。如果用户尚未登录,则防护人员可以将其重定向到登录页面。

如何使用CanActivate Guard

首先,我们需要创建一个Angular Service

该服务必须导入并实现CanActivate接口。该接口在@angular/router模块中定义接口有一种方法,即canActivate我们需要在我们的服务中实施它。CanActivate接口的详细信息如下所示。

角上最好的书

前8角最佳书籍,它可以帮助您开始使用角度。 

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

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

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

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

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

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

canActivate保护的例子如下

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

CanActivate卫队示例

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

LoginComponent

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

  • login.component.ts

  • login.component.html

  • auth.service.ts

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

产品组件

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

  • product.component.ts

  • product.component.html

  • product.service.ts

  • product.ts

其他成分

  • app.component.ts

  • app.component.html

  • home.component.ts

  • contact.component.ts

可以激活守卫

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

  • auth-guard.service.ts

首先,我们CanActivate@angular/router模块导入

AuthGuardService工具的CanActivate界面

AuthServce在Guard的构造函数中注入

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

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

  • app.routes .ts

最后,在中注册服务app.module

  • app.module.ts

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

Angular CanActivate保护示例

参考

CanActivate界面



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





Angular Route Guard中更好的重定向

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

  5分钟阅读

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

是的,我正在尝试绘制一些草图。初学者在这里:D

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

Angular 7.1更新日志

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可以执行它并确保适当地确定可能正在运行的多个路由保护的优先级。优先级排序通过将最接近应用程序根的保护措施赋予最高优先级来进行结果,如果儿童看守返回falseUrlTree但其父项尚未解决,它将等到父项解决。如果家长监护权检查失败,它将优先于所有其他检查。

导航取消 另一个好处是可以取消所有其他导航事件。每当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/

普通分类: