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

canActivate和canDeactivate是守卫，当你的应用程序在应用程序中有多个角色，比如用户，管理员等时，你使用警卫来保护它们，你也可以使用canActivate作为页面只有登录用户才能访问，反之亦然canDeactivate

canActivate

的代码示例

export class AuthGuard implements CanActivate {
    constructor(
        private _router: Router,
        private data: DataService
    ) {}

    canActivate(): Observable < boolean > {
        var token = this.data.getToken();
        if (token) {
            return Observable.of(true);
        } else {
            return Observable.of(false);
        }
    }
}

你在路由器中这样使用它

{
    path: 'user',
    component: UserComponent,
    canActivate: [AuthGuard]
}

Answer 2

控制对路径的访问

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

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

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

使用路线注册路线卫士

为了使用路线防护，我们必须将它们注册到我们希望它们运行的特定路线。

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

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

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();
  }

}

什么是canActivate和canDeactivate在路由？

2 个答案: