如何解决Angular Auth Guard中Promise返回值判断路由权限的问题

问题根源 #

你用到的getObject是async异步方法，调用后返回的是Promise实例，而非存储的实际业务值，直接对Promise对象做非空判断的结果永远为false，所以现有逻辑完全无法按照预期生效。

修复方案 #

Angular的canActivate接口本身就支持返回Promise<boolean>类型，你只需要把canActivate也声明为异步函数，等待getObject返回实际值后再做逻辑判断即可，修改后的代码如下：

async canActivate(): Promise<boolean> {
  // 等待异步方法执行完成，拿到存储的实际值
  const isInitialized = await this.localStorage.getObject('isInitialized');
  if (!isInitialized) {
    this.router.navigate(['/locaties']);
    return true;
  }
  return false;
}

逻辑说明 #

上述代码的执行逻辑和你原有写法的预期一致：如果isInitialized的值为假，就跳转到/locaties路由，同时返回true允许进入当前Guard对应的路由；如果isInitialized为真，就返回false禁止进入。如果你的实际业务逻辑是反过来的（比如未初始化的用户不允许进入登录页），调整对应return的布尔值即可。

内容的提问来源于stack exchange，提问作者Furkan Öztürk