Question

我有这样的警卫 details.guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRoute } from '@angular/router';

import { AuthService } from '/auth-service';

import { AuthorizationRoles } from './constants';
import { Tags } from './tags';

/**
 * This will guard route
 */
@Injectable()
export class DetailsGuardService implements CanActivate {

  constructor(private authService: AuthService) { }

  /**
   * Returns whether or not user can see details
   */
  canActivate(activatedRoute: ActivatedRoute): boolean {
    const type = activatedRoute.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    }
  }
}

我遇到错误

details.guard.service.ts（20,3）中的错误：错误TS2416：属性无法将类型'DetailsGuardService'中的'canActivate'分配给基本类型为“ CanActivate”的相同属性。输入'（activatedRoute： ActivatedRoute）=> boolean'不能分配给'（route： ActivatedRouteSnapshot，状态：RouterStateSnapshot）=>布尔值| UrlTree |可观察诺言'。参数'activatedRoute'和'route'的类型不兼容。在“ ActivatedRouteSnapshot”类型中缺少属性“快照”，但在“ ActivatedRoute”类型中是必需的。

我不知道在哪里看，任何帮助都会很好，谢谢

Answer 1

首先，需要将激活的路由注入到构造函数中。但是您应该使用ActivatedRouteSnapshot

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>

当您不应该导航时，还应该返回false。

考虑以下代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const type = route.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    } else
    {
        return false;
    }


  }

参数“ activatedRoute”和“ route”的类型不兼容

1 个答案: