路由中的canActivate和canDeactivate是什么？

Question

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  canActivate() {
    return this.authService.isLoggedIn();
  }
} 

canActivate和canDeactivate属性是什么意思？

Answer 1

控制进出路线的访问

要控制用户是否可以导航到或离开给定的路线，请使用路线守卫。

例如，我们可能希望某些路线只有在用户登录或接受条款和条件后才能访问。我们可以使用路由守卫来检查这些条件并控制对路由的访问。

路线守卫还可以控制用户是否可以离开某条路线。例如，假设用户已在页面上的表单中键入信息，但尚未提交表单。如果他们离开页面，他们将丢失信息。如果用户尝试离开路线而不提交或保存信息，我们可能想要提示用户

使用 Routes 注册 Route Guard

为了使用路由守卫，我们必须将它们注册到我们希望它们运行的​​特定路由上。

例如，假设我们有一个帐户路由，只有登录的用户才能导航到该路由。此页面也有表单，我们希望确保用户在离开帐户页面之前提交了未保存的更改。

在我们的路由配置中，我们可以将我们的守卫添加到该路由中：

import { Routes, RouterModule } from '@angular/router';
import { AccountPage } from './account-page';
import { LoginRouteGuard } from './login-route-guard';
import { SaveFormsGuard } from './save-forms-guard';

const routes: Routes = [
  { path: 'home', component: HomePage },
  {
    path: 'accounts',
    component: AccountPage,
    canActivate: [LoginRouteGuard],
    canDeactivate: [SaveFormsGuard]
  }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(routes);

现在，路由器会在激活帐户路由时检查 LoginRouteGuard，离开该路由时将检查 SaveFormsGuard。

实现 CanActivate

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';

@Injectable()
export class LoginRouteGuard implements CanActivate {

   constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
   }
 }

实现 CanDeactivate

export interface CanDeactivate<T> {
  canDeactivate(component: T, route: ActivatedRouteSnapshot, state:    RouterStateSnapshot):
       Observable<boolean>|Promise<boolean>|boolean;
 }

我们可以使用该组件来确定用户是否可以停用。

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { AccountPage } from './account-page';

@Injectable()
export class SaveFormsGuard implements CanDeactivate<AccountPage> {

  canDeactivate(component: AccountPage) {
    return component.areFormsSaved();
  }

}