angular子路由使用_使用CanActivate / CanActivateChild Guard保护Angular v2 +路由

angular子路由使用

Protecting routes is something that has to happen in any app with authentication. There will be sections of your applications that you don't want certain users to get to.

在使用身份验证的任何应用中，保护路由都是必须要做的事情。您的应用程序中有些部分是您不希望某些用户使用的。

We'll be looking at a simple example of how to use Angular router guards to protect an area of our site. While this will be a simple example that you can reference back to, we'll look at more advanced setups in future articles.

我们将看一个简单的示例，说明如何使用Angular路由器防护装置保护我们站点的某个区域。虽然这是一个简单的示例，您可以参考，但以后的文章中我们将介绍更高级的设置。

In this tutorial, we'll look at how we can use Angular guards to:

在本教程中，我们将研究如何使用Angular防护：

Protect an entire section (route)
保护整个路段（路线）
Protect just a part of the app (child routes)
仅保护应用程序的一部分（子路径）

Routing Angular Applications路由Angular应用程序

TLDR：如何创建和使用Angular Guard ( TLDR: How to Create and Use An Angular Guard )

The overall process for protecting Angular routes:

保护Angular路由的整体过程：

Create a guard service: ng g guard auth
创建guard服务： ng g guard auth
Create canActivate() or canActivateChild() methods
创建canActivate()或canActivateChild()方法
Use the guard when defining routes
定义路线时请使用防护装置

To create a guard using the Angular CLI, use:

要使用Angular CLI创建防护，请使用：

ng g guard auth

This will create an auth.guard.ts

这将创建一个auth.guard.ts

Here is the generated file:

这是生成的文件：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthGuard implements CanActivate {canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return true;}}

Now we can add in an AuthService that we may have:

现在，我们可以添加一个可能具有的AuthService ：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';// import the auth service here
// import { AuthService } from '../core/auth.service';@Injectable()
export class AuthGuard implements CanActivate {// add the service we needconstructor(private auth: AuthService,private router: Router) {}canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// handle any redirects if a user isn't authenticatedif (!this.auth.isLoggedIn) {// redirect the userthis.router.navigate(['/login']);return false;}return true;}}

In the canActivate() method, we can do any checks we need to check if a user has access. Return a boolean true/false. Also, this is where you can handle routing users away from a route if they don't have access.

在canActivate()方法中，我们可以执行检查用户是否具有访问权限所需的所有检查。返回布尔值true/false 。同样，在这里，如果路由用户没有访问权限，则可以处理他们离开路由的情况。

Import this new class into a module so your app knows how to grab it. Then you can use this when defining routes:

将此新类导入模块，以便您的应用知道如何抓取它。然后，您可以在定义路线时使用它：

// import the newly created AuthGuardconst routes: Routes = [{path: 'account',canActivate: [AuthGuard]}
];

This will protect the /account route! That's the quick overview on how to use the guards. Let's go a bit more in depth.

这样可以保护/account路线！这是有关如何使用防护装置的快速概述。让我们更深入一点。

角路由器守卫 ( The Angular Router Guards )

The Angular router ships with a feature called guards. These provide us with ways to control the flow of our application. We can stop a user from visitng certain routes, stop a user from leaving routes, and more.

Angular路由器附带一项称为防护功能的功能。这些为我们提供了控制应用程序流程的方法。我们可以阻止用户访问某些路线，阻止用户离开路线等等。

We'll only be talking about CanActivate/CanActivateChild in this tutorial, but be aware that these are the available guards:

在本教程中，我们仅讨论CanActivate / CanActivateChild ，但请注意，以下是可用的防护措施：

CanActivate: Check if a user has access
CanActivate ：检查用户是否有权访问
CanActivateChild: Check if a user has access to any of the child routes
CanActivateChild ：检查用户是否有权访问任何子路由
CanDeactivate: Can a user leave a page? For example, they haven't finished editing a post
CanDeactivate ：用户可以离开页面吗？例如，他们尚未完成帖子的编辑
Resolve: Grab data before the route is instantiated
Resolve ：在实例化路由之前获取数据
Lazy loading feature modules.
延迟加载功能模块。
CanLoad: Check to see if we can load the routes assets
CanLoad ：检查是否可以加载路线资产

创建示例应用 ( Creating a Sample App )

Our sample app will be a very simple one. We'll use the Angular CLI to create a new Angular app. We'll also create a brand new account and dashboard sections. The requirements:

我们的示例应用程序将是一个非常简单的应用程序。我们将使用Angular CLI创建一个新的Angular应用。我们还将创建一个全新的帐户和仪表板部分。要求：

Only logged in users can visit the /account section
只有登录的用户可以访问/account部分
Only admins can access the /dashboard section
只有管理员可以访问/dashboard部分
Only super admins can visit the /dashboard/super-duper section
只有超级管理员才能访问/dashboard/super-duper部分

Let's get started!

让我们开始吧！

使用CLI创建应用 (Using the CLI to Create an App)

Once you have the CLI installed, create a new app with routing and a home page component using:

一旦安装了CLI，请使用以下命令创建一个具有路由和主页组件的新应用：

ng new angular-guard-app --routing

This will generate a new app for us with routing configured. Check out our src/ folder:

这将为我们生成一个配置了路由的新应用。查看我们的src/文件夹：

We can open up our app now using:

我们现在可以使用以下方法打开我们的应用程序：

ng serve --open

创建一条主要路线 ( Creating a Main Route )

We'll need a home page route so that we can have a default path configured. Create a home component with:

我们需要主页路由，以便我们可以配置默认路径。使用以下命令创建一个家庭组件：

ng g component home

The CLI will automatically add this new component to our app.module.ts. All we have to do is set it in our app-routing.module.ts:

CLI将自动将此新组件添加到我们的app.module.ts 。我们要做的就是在app-routing.module.ts ：

// app-routing.module.ts import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';const routes: Routes = [{path: '',component: HomeComponent}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

Now when you visit your app, you should see home works in tiny text at the very bottom. This is where the <router-outlet> is located.

现在，当您访问应用程序时，您应该会在底部看到小字体的家庭作品 。这是<router-outlet>所在的位置。

Next we'll move onto our app sections.

接下来，我们将进入我们的应用程序部分。

创建我们的应用程序部分 ( Creating Our App Sections )

We'll need an account section and also a dashboard section. While we could create these as components, we'll be creating them as modules.

我们将需要一个帐户部分和一个仪表板部分。虽然我们可以将它们创建为组件，但是将它们创建为模块。

Here's the modules and components we'll want.

这是我们想要的模块和组件。

|- dashboard.module.ts|- dashboard-home.component.ts|- super-duper.component.ts
|- account.module.ts|- account-home.component.ts

Since these are sections of our app that a user might not always visit, we may want to lazy-load these sections. By lazy loading, the assets for these sections will only be loaded when a user visits that section.

由于这些是用户可能并不总是访问的应用程序部分，因此我们可能需要延迟加载这些部分。通过延迟加载， 只有当用户访问该部分时，才会加载这些部分的资产 。

# create the account module and main component
ng g module account --routing
ng g component account/account-home# create the dashboard module and main component
ng g module dashboard --routing
ng g component dashboard/dashboard-home# create the dashboard child route for super admins
ng g component dashboard/super-duper

These commands will get us two new modules and a new component.

这些命令将为我们提供两个新模块和一个新组件。

Now we can setup the routing for each of these modules.

现在，我们可以为每个模块设置路由。

路由子模块 ( Routing the Child Modules )

Each module created will have its own routing file (dashboard-routing.module.ts and account-routing.module.ts).

创建的每个模块将具有其自己的路由文件（ dashboard-routing.module.ts和account-routing.module.ts ）。

We'll set up the routing in each of these child routing files. The auth guards will be used when we define the routes in these modules. The reason we attach guards here and not in the main app-router.module.ts is because we'll be lazy-loading them and we'll have more control in the child routing files.

我们将在每个这些子路由文件中设置路由。 当我们在这些模块中定义路由时，将使用auth保护。 我们在此处而不是在主app-router.module.ts附加防护的原因是，由于我们将延迟加载它们，因此我们将在子路由文件中拥有更多控制权。

Let's setup the routes now:

现在设置路由：

// account-routing.module.tsimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountHomeComponent } from './account-home/account-home.component';const routes: Routes = [{path: '',component: AccountHomeComponent}
];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class AccountRoutingModule { }

// dashboard-routing.module.tsimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
import { SuperDuperComponent } from './super-duper/super-duper.component';const routes: Routes = [{path: '',component: DashboardHomeComponent,children: [{path: 'super-duper',component: SuperDuperComponent}]}
];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class DashboardRoutingModule { }

Now we can add these to the main app-routing.module.ts. We'll use the syntax for lazy-loading by using the loadChildren parameter.

现在，我们可以将它们添加到主app-routing.module.ts 。我们将通过使用loadChildren参数将语法用于延迟加载。

// app-routing.module.tsimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';const routes: Routes = [{path: '',component: HomeComponent},{path: 'account',loadChildren: 'app/account/account.module#AccountModule'},{path: 'dashboard',loadChildren: 'app/dashboard/dashboard.module#DashboardModule'}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

Notice that we don't import the AccountModule or DashboardModule. We also don't import these into the main AppModule; if we did import it there, then it would no longer be lazy-loaded.

注意，我们不导入AccountModule或DashboardModule 。我们也不AppModule这些导入到主AppModule ；如果我们确实将其导入到那里，那么它将不再被延迟加载。

Since we defined the path as dashboard and account in the main app-routing.module.ts, we'll define the top level route as '' in the child routes.

由于我们在主app-routing.module.ts中将路径定义为dashboard和account ，因此我们将在子路径中将顶级路径定义为'' 。

Now that we have our routes ready, we can work on the auth service and guards!

现在我们已经准备好路由，我们可以使用auth服务和警卫了！

认证服务 ( Authentication Service )

We'll create a generic authentication service that won't hook into anything. We'll return a boolean for true to show a user is logged in. In your application, you would hook this into a service like a backend API to check auth status.

我们将创建一个通用的身份验证服务，该服务不会包含任何内容。我们将返回一个布尔值true以显示用户已登录。在您的应用程序中，您可以将其挂接到后端API之类的服务中以检查身份验证状态。

We'll use the CLI to create this service. I'm going to drop this right into the main app/ folder but it would be good practice to create services and guards inside a CoreModule or its own AuthModule.

我们将使用CLI创建此服务。我将把它放到主app/文件夹中，但是在CoreModule或自己的AuthModule创建服务和防护将是一个好习惯。

ng gservice auth/auth

We'll add a method to check for isLoggedIn and isSuperAdmin. We'll just fill these in with a boolean but you'll need to make sure to add the logic for your own apps. It wouldn't be great security if your AuthService always returned true!

我们将添加一种方法来检查isLoggedIn和isSuperAdmin 。我们只用一个布尔值来填充它们，但是您需要确保为自己的应用程序添加逻辑。如果您的AuthService始终返回true，那将不是很好的安全性！

import { Injectable } from '@angular/core';@Injectable()
export class AuthService {constructor() { }get isLoggedIn() {return true;}get isSuperAdmin() {return true;}}

Note We're using the get keyword here to treat these as properties. That way we can access these functions as:

注意我们在这里使用get关键字将它们视为属性。这样，我们可以按以下方式访问这些功能：

// with the get keyword we can do this
const isLoggedIn = this.auth.isLoggedIn;// without it, we have to treat it was a method
const isLoggedIn = this.auth.isLoggedIn();

Our service is ready to be used in our guards!

我们的服务随时可以在我们的警卫中使用！

验证卫士 ( Authentication Guard )

We'll need a guard to check if a user is logged in or not. We'll create it in the auth/guards folder that we'll create now with the CLI:

我们需要一个保护人员来检查用户是否已登录。我们将在现在使用CLI创建的auth / guards文件夹中创建它：

ng g guard auth/guards/auth

Here's the new guard in all its glory:

这是新警卫的全部荣耀：

// app/auth/guards/auth.guard.tsimport { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';@Injectable()
export class AuthGuard implements CanActivate {canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return true;}
}

We'll inject the AuthService and bring in the Router so that we can:

我们将注入AuthService并引入Router以便我们可以：

check if a user is logged in
检查用户是否登录
redirect them if not logged in
如果未登录，则将其重定向

// app/auth/guards/auth.guard.tsimport { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';@Injectable()
export class AuthGuard implements CanActivate {constructor(private auth: AuthService,private router: Router) {}canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// redirect and return falseif (!this.auth.isLoggedIn) {this.router.navigate(['']);return false;}return true;}
}

Easy cheese! Let's make an admin guard now for our dashboard super-duper section.

简单的奶酪！现在让我们为仪表板超级双节的管理员做好准备。

超级管理员 ( Super Admin Guard )

ng g guard auth/guards/admin

// app/auth/guards/admin.guard.tsimport { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';@Injectable()
export class AuthGuard implements CanActivate {constructor(private auth: AuthService,private router: Router) {}canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// redirect and return falseif (!this.auth.isSuperAdmin) {this.router.navigate(['']);return false;}return true;}
}

With our service and guards ready to use, we'll need to register them with our application's AppModules. While the CLI automatically registers components, it doesn't do the same for services.

准备好使用我们的服务和防护后，我们需要在应用程序的AppModules注册它们。 CLI自动注册组件时，它对服务的功能却不同。

// app.module.tsimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AuthService } from './auth/auth.service';
import { AuthGuard } from './auth/guards/auth.guard';
import { AdminGuard } from './auth/guards/admin.guard';@NgModule({declarations: [AppComponent,HomeComponent],imports: [BrowserModule,AppRoutingModule],providers: [AuthService,AuthGuard,AdminGuard],bootstrap: [AppComponent]
})
export class AppModule { }

All good! Now we can finally apply these to our routes. Open up the child routes and let's use our new guards.

都好！现在，我们终于可以将这些应用于我们的路线了。打开子路线，让我们使用我们的新警卫。

申请我们的路线 ( Applying to Our Routes )

In the account routing, we'll use the main AuthGuard. Here are the relevant lines:

在帐户路由中，我们将使用主要的AuthGuard 。以下是相关行：

// account-routing.module.ts
...import { AuthGuard } from '../auth/guards/auth.guard';const routes: Routes = [{path: '',component: AccountHomeComponent,canActivate: [AuthGuard]}
];...

Let's test this out! Visit http://localhost:4200/account in your browser. You should be able to see at the very bottom account-home works!

让我们测试一下！在浏览器中访问http：// localhost：4200 / account 。您应该能够在最底层的帐户首页看到作品！

测试身份验证 ( Testing the Auth )

We need to make sure that our user actually gets redirected to the home page if they aren't authenticated. Go back into the AuthService and change the isLoggedIn() method to return false.

如果未通过身份验证，我们需要确保用户实际上已重定向到主页。返回AuthService并更改isLoggedIn()方法以返回false 。

get isLoggedIn() {return false;
}

Now when we visit http://localhost:4200/account, we'll be redirected to the home page!

现在，当我们访问http：// localhost：4200 / account时，我们将被重定向到主页！

这是如何运作的？ (How does this work?)

When we define the route and its guard, Angular will look inside the guard and look for the corresponding method. For instance, we defined this line:

当我们定义路线及其保护后，Angular将在保护内看并寻找相应的方法。例如，我们定义了这一行：

{path: '',component: AccountHomeComponent,canActivate: [AuthGuard]
}

Angular will look inside the AuthGuard file and match the canActivate method.

Angular将在AuthGuard文件中查找并匹配canActivate方法。

CanActivateChild ( CanActivateChild )

We could do the same exact thing for our dashboard section, but let's switch it up. We'll use canActivateChild instead of the main canActivate. Remember we defined child routes inside the dashboard-routing.module.ts.

我们可以对仪表板部分执行相同的操作，但让我们对其进行切换。我们将使用canActivateChild而不是主要的canActivate 。记住，我们在dashboard-routing.module.ts定义了子路由。

Let's update our admin guard to also implement the canActivateChild method.

让我们更新我们的管理员以实现canActivateChild方法。

// dashboard-routing.module.tsimport { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';@Injectable()
export class AdminGuard implements CanActivate, CanActivateChild {constructor(private auth: AuthService,private router: Router) {}canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// redirect and return falseif (!this.auth.isLoggedIn) {this.router.navigate(['']);return false;}return true;}canActivateChild(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// redirect and return falseif (!this.auth.isLoggedIn) {this.router.navigate(['']);return false;}return true;}
}

Then we can apply this to our dashboard routes:

然后，我们可以将其应用于我们的仪表板路线：

// dashboard-routing.module.ts
...import { AdminGuard } from '../auth/guards/admin.guard';const routes: Routes = [{path: '',component: DashboardHomeComponent,canActivateChild: [AdminGuard],children: [{path: 'super-duper',component: SuperDuperComponent}]}
];...

One thing to note is that since these are child routes, we'll need to add a new <router-outlet></router-outlet> to the dashboard-home.component.html:

要注意的一件事是，由于这些是子路由，因此我们需要在dashboard-home.component.html添加一个新的<router-outlet></router-outlet> ：

<p>dashboard-home works!
</p><router-outlet></router-outlet>

Now our guard works! We can go into AuthService and change the isAdmin() method to check.

现在我们的守卫工作了！我们可以进入AuthService并更改isAdmin()方法进行检查。

The reason you would use CanActivateChild over CanActivate is that you can limit the nested router-outlet. Notice we can still see the dashboard-home.component but not anything in its own nested routes.

在CanActivate上使用CanActivateChild的原因是可以限制嵌套的router-outlet 。注意，我们仍然可以看到dashboard-home.component但在其自己的嵌套路由中什么也看不到。

结论 ( Conclusion )

Angular CanActivate and CanActivateChild guards provide a clean and defined way to "guard" certain routes. We've only taken a look at two of the guards, but all of them are worth looking into! They are a solid way to manage the flow of users throughout your app.

Angular CanActivate和CanActivateChild防护提供了一种清晰明确的方式来“防护”某些路线。我们只看了两个警卫，但所有这些警卫都值得研究！它们是管理整个应用程序中用户流的可靠方法。

翻译自: https://scotch.io/tutorials/protecting-angular-v2-routes-with-canactivatecanactivatechild-guards