用于检查路由是否有状态的角度防护答案

【问题标题】：Angular guard for checking if route has state用于检查路由是否有状态的角度防护
【发布时间】：2020-12-01 06:15:30
【问题描述】：

我有一个像这样导航到的组件

this.router.navigate(['results'], { state });

一旦我在构造函数中获取数据

constructor(private router: Router) { 
  const { state } = this.router.getCurrentNavigation().extras;
}

我想设置一个守卫来检查这些数据是否存在，否则导航到别处

@Injectable()
export default class RouteHasDataGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return !!state.root.data;
    } 
}

但这不起作用。你能帮我解决这个问题吗？

【问题讨论】：

角度路由对象嵌套不一致。您可能希望在您的 return !!state.root.data 上放置一些断点，以确定它何时被击中，以及您是否正在为您的 state 数据查找正确的对象。
你试过single吗！ ?
我在路由和状态中找到的任何数据属性在转换发生时都是空的，但是当路由结束时数据就在那里。什么是单身？

标签： angular angular-services angular-guards

【解决方案1】：

您可以像这样访问状态：

@Injectable()
export default class RouteHasDataGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return !!window.history.state;
    } 
}

【讨论】：

【解决方案2】：

不要在保护构造函数中读取额外内容。阅读 canActivate() 方法中的附加内容。

@Injectable()
export default class RouteHasDataGuard implements CanActivate { 

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const { state } = this.router.getCurrentNavigation().extras;
    return !!state.root.data;
  } 
}

【讨论】：