带有 Promise 和 if 语句的 Angular Auth Guard

Question

我想使用守卫来决定用户是否可以导航到登录页面，但我知道我的逻辑是错误的，因为Promise。 请参阅下面的代码。

  canActivate(): boolean | Observable<boolean> | Promise<boolean> {
    if (!this.localStorage.getObject('isInitialized')) {
      this.router.navigate(['/locaties']);
      return true;
    }
    return false;
  }

我知道我在做什么是错误的，但我缺乏关于解决这个问题的承诺的知识。我需要做什么才能完成这项工作？

这是我的localstorage.getObject()：

  // Returns object
  async getObject(key: string) {
    const ret = await Storage.get({ key: key });
    return JSON.parse(ret.value);
  }

Answer 1

如果你想在你的 can activate 方法中使用基于异步结果的条件，那么你可以使用 Promise。如果您打算使用本地存储中的直接值，则无需使用 promise。您可以执行以下操作来使用 Promise...

  canActivate(): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise(() => {
    if (!this.localStorage.getObject('isInitialized')) {
      this.router.navigate(['/locaties']);
      // Do not allow the route
      resolve(false);
    } else {
      // Allow the route
      resolve(true);
     }
    
    });
  }

Answer 2

答案是

    this.localStorage.getObject('isInitialized').then((res) => {
      if (res == true) {
        this.router.navigate(['/locaties']);
        return false;
      }
    });
    return true;
  }

必须记住，当用户想要导航到页面时会触发身份验证保护。没有必要让它比这更复杂

Answer 3

所以这里有一些问题，但我不认为承诺是其中之一。您的函数签名表明您可以选择返回三种类型之一，

canActivate(): boolean | Observable<boolean> | Promise<boolean>

但你只返回一个布尔值，所以你真的可以重写这个，

canActivate(): boolean

但这不是问题。没有看到您的路线设置很难说，但是如果他们请求的路线是允许的并且没有必要，您似乎正在重新路由用户。当用户已经尝试导航到一个页面时，路由守卫就会运行。如果路由守卫返回 true，则允许进行导航，并且用户将继续访问路由守卫所保护的任何页面。

但是当路由保护返回 false 时，您应该指定重定向页面。换句话说，当用户无法访问守卫背后的页面时，你想将他们发送到哪里？

一般来说，看起来像这样，

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate(state: RouterStateSnapshot): boolean {
        if (!this.localStorage.getObject('isInitialized')) {
            //No need to route here, user will be taken to the route they were trying access
            return true;
        } else {
            //Send the user back to the '/anotherpage' path if they are not logged in
            this.router.navigate(['/anotherpage']);
            return false;
        }
    }
}

然后在这样的地方定义你的路线，

export const appRoutes: Routes = [
    {
        path: 'pageProtectedByAuthGuard',
        component: YourComponent,
        canActivate: [AuthGuard]
    }
];

然后在你的模块中你需要导入这些路由，

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { enableTracing: false })],
    ...
})

更多关于 CanActivate 的信息在这里：https://angular.io/api/router/CanActivate