角度异步路由器导航不起作用答案

【问题标题】：Angular Async Router Navigation Not Working角度异步路由器导航不起作用
【发布时间】：2019-09-17 18:18:22
【问题描述】：

在我向我的 REST API 发送请求并且登录成功后，我想导航到另一个页面。我发现我需要为此使用 async 并等待。

onLoginSubmit() {
this.submitted = true;
if (this.loginForm.invalid) {
  return;
}

this.loginService.login(this.loginForm.value.username, this.loginForm.value.password).then(async (result: AuthModel) => {
  this.cookieService.set('token', result.token);
  console.log(result.token, result.succes);
  await this.router.navigateByUrl['dashboard'];

},(error) => {
    console.log(error);
    this.router.navigateByUrl['/dashboard'];
  });
}

auth.service.ts：

async login(username: string, password: string): Promise<AuthReturnModel> {
const loginModel: LoginModel = new LoginModel();
loginModel.username = username;
loginModel.password = password;

let authReturnModel: AuthReturnModel;

await this.httpClient.post<AuthReturnModel>(API_URL +"/users/login", loginModel)
.pipe(
  map((data: AuthReturnModel) => authReturnModel = data)
).pipe(
  catchError(error => of(`Bad Promise: ${error}`))
).toPromise();
return authReturnModel;
}

“仪表板”页面不会加载？提前谢谢你。

【问题讨论】：

我相信你的应用程序中有一个守卫。你没有表现出来。它可能会阻止仪表板加载。也请出示警卫。
@MoxxiManagarm 我不使用保护它的所有定制授权
警卫也是定制的？！您是否知道，如果没有警卫，任何用户都可以在直接作为 url 输入时路由到仪表板？

标签： angular rest async-await

【解决方案1】：

也许您在 navigateByUrl 调用中错过了 /

this.router.navigateByUrl['/dashboard'];

另外，我认为您不需要在 navigateByUrl 之前等待，如果使用 then，您已经在异步调用中。

Here 你可以找到一个完整的工作示例/教程，用于在 Angular 中使用登录。示例中使用的登录调用是：

  login(){
    console.log(this.loginForm.value);
    this.isSubmitted = true;
    if(this.loginForm.invalid){
      return;
    }
    this.authService.login(this.loginForm.value);
    this.router.navigateByUrl('/admin');
  }

【讨论】：

【解决方案2】：

在 auth 服务中，您返回的是 authReturnModel，但在组件中，您期望得到一个承诺。（您已使用then 捕获结果。）。

我认为，由于您使用的是 Promise，因此您可以在不使用异步等待的情况下使用它，

login(username: string, password: string): Promise<AuthReturnModel> {
  const loginModel: LoginModel = new LoginModel();
  loginModel.username = username;
  loginModel.password = password;

  let authReturnModel: AuthReturnModel;

  return this.httpClient.post<AuthReturnModel>(API_URL +"/users/login", loginModel)
   .pipe(
      map((data: AuthReturnModel) => authReturnModel = data),
      catchError(error => of(`Bad Promise: ${error}`))
    ).toPromise(); 
}

组件。

this.loginService.login(this.loginForm.value.username, this.loginForm.value.password).then((result: AuthModel) => {
  this.cookieService.set('token', result.token);
  console.log(result.token, result.succes);
  this.router.navigateByUrl['dashboard'];

},(error) => {
    console.log(error);
    this.router.navigateByUrl['/dashboard'];
  });
}

【讨论】：

它说需要 .then() ？
then 用于从 Promise 中获取结果。由于您使用了toPromise 选项，因此您必须使用then
我在我的组件中使用 .then() 方法？还是您的意思是在服务文件中？
在组件中。我建议放弃 async-await。