如果您必须实现用户身份验证(登录或登录)或用户授权(允许当前用户查看该屏幕吗?)，那么本文就是为您准备的!

我们将看看如何使用角警卫作为一种方式:

• 检查当前用户是否已登录
• 如果需要，将用户重定向到登录/登录屏幕
• 检查用户是否被允许导航到特定的屏幕/组件，并决定从那里做什么

进入路线警卫

路由保护是一种Angular服务，它实现了一种特定的方法(通常canActivate)，它将在每次发生路由导航时返回以下值之一:

• 如果它返回真正的，导航过程继续。
• 如果它返回假，导航过程停止，什么也没有发生。
• 如果它返回UrlTree，当前导航取消，新的导航开始到UrlTree(返回UrlTree是我们想要重定向到的路径)

让我们看一个例子。下面的路由守卫使用LoginService检查用户是否已登录。如果是这种情况，用户可以导航到他们想要的目的地。否则，它们会被重定向到/登录：

@Injectable ()
出口类AuthGuard实现了CanActivate {构造函数（公共服务: LoginService,公共路由器路由器:{
｝canActivate ():布尔| UrlTree {
返回这．服务.isUserLoggedIn () | |
这．路由器.parseUrl (“登录”）;
｝
｝

你可以看到canActivate方法在用户已登录时返回true，并返回UrlTree如果用户不是。UrlTree只是重定向到另一个地方，在我们的例子中，是LoginComponent．

为了让上面的守卫正确工作，我们必须告诉Angular这个守卫应该在什么时候起作用，以及它应该“保护”哪些组件。这通常发生在我们的路由配置中app.routing.ts：

常量appRoutes: Routes = [
｛
路径：”，组件: StoreViewComponent
}, {
路径：“签出”，
组件: CheckoutViewComponent,
canActivate: [AuthGuard] //我们的警卫保护/结帐
}, {
路径：“登录”，组件: LoginComponent
｝
];

上面的配置表明我们的守卫只保护应用程序中的一条路由，/结帐．其他的路线是“公共”的，和警卫的canActivate方法只在用户试图导航到/结帐，而不是/登录例如。

授权和多个不同的角色呢?

路由器配置可以在一条路由上应用多个防护。事实上，canActivate属性以一个守护数组作为参数:

｛
路径:“admin”，组件:AdminViewComponent
canActivate: [AuthGuard, AdminRoleGuard]
},

因此，我们可以为不同的目的定义几个守卫，如上面的例子所示:

• 一个AuthGuard这将检查用户是否已登录，如果未登录则重定向到登录屏幕
• 一个AdminRoleGuard将检查当前用户是否为管理员，如果不是则重定向到错误屏幕。

我们可以拥有尽可能多的守卫，因此在允许导航之前可以微调任何想要检查的规则/角色。

其他保护方法:CanActivateChild, CanLoad, CanDeactivate

让我们从CanActivateChild，它的行为完全像CanActivate但是对于子路由。关键的区别是它在任何子路由被激活之前运行:

｛
路径:“管理”,
组件:AdminComponent,
canActivate:(AuthGuard),
孩子:(
｛
路径:“
canActivateChild:(AuthGuard),
孩子们:[…］
｝
］
｝

然后是CanDeactivate这使得导航无法偏离既定路线。因此，例如，当我们有一个表单，在用户可以做任何事情之前必须填写，我们可以使用CanDeactivate以确保用户在提交表单之前不会离开表单。

最后,CanLoad用于使用惰性加载的路由，如果我们一开始就不想让用户访问这些路由，可以用来阻止加载这些路由的代码:

｛
路径:“团队/:id”,
组件:TeamComponent,
loadChildren: () => import('./team')。然后(mod => mod. teammodule)，
canLoad (CanLoadTeamSection):
｝

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习和适应Angular。

如果你在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请为它鼓掌或分享。感谢您的帮助。你也可以点击这里订阅Medium．