Angular 路由的奇怪行为 [英] Weird behavior of Angular routing

问题描述

我之前问过我奇怪的路由问题.我现在有一个解决方案，但仍然偶尔会出现奇怪的行为.我的页面应该转到登录"，一旦成功，然后转到主要".这实际上现在有效，除了登录->家 ->空白 ('') ->家.最后的闪光"或刷新我不明白.这解释了它总是默认为登录"的原始行为.页面，几乎从未停留在主页上.碰巧它不闪烁"(空白并重新加载/刷新).此时控制台清除.

I have asked before about my weird routing problem. I now have a solution, and still occasionally weird behavior. My page is supposed to go to "signin", once succeeded then to "main". This actually works now, except is goes to signin-> home -> blank ('') -> home. The last "flash" or refresh I dont understand. This explains the original behavior where it would always default to the "signin" page, hardly ever staying on the home page. It happens that it does not "flash" (blank and reload/refresh). The console clears at this moment.

现在可以了，但我还是觉得有点奇怪.

Now it works, but I still feel a bit weird about it.

截至目前:

1. 页面打开
2. 空进入主
3. 在主要"上它将查看 SiginGuard，后者会将其路由到登录"
4. 登录页面打开
5. 用户输入凭据
6. 主页打开--- 这里是奇怪的东西:
7. 它变为空，重定向，
8. 然后通过重定向再次打开主

我到处都有 alert() 来跟踪它 - 没有任何意外发生

I have had alert()'s everywhere to track it - nothing unexpected happens

最后提示:如果登录时间超过 4~5 秒，将重置为登录页面.再次登录时，它将转到主页而不是闪烁(因为它已经这样做了").有时 API 可能会很慢.我的超时没有任何影响，我的 http 中的某些内容没有为此等待足够长的时间.

全部代码:路由:

export const appRoutes: Routes = [
  {
    path: 'signin',
    component: SigninComponent,
    data: {
      title: 'Login',
      subtitle: ''
    }
  },
  {
    path: 'main',
    component: MainComponent,
    canActivate: [SigninGuard],
    data: {
      title: 'Main page',
      subtitle: ''
    }
  },
  {
    path: '',
    redirectTo: '/main',    /// this used to be /signin - which would just should the signin page forever
    pathMatch: 'full'
  },
  {
    path: '**',
    component: NotFoundComponent,
    data: { title: '404' }
  }
]; 

SigninGuard:

The SigninGuard:

 canActivate() {
    const currentUser = this.loginInfo.getUserName();
    if (!currentUser) {
    //  alert("message for me"); // used to have such alerts to track the code - it did never go here
      this.router.navigate(['/signin']);
    }
  //  another alert here
    return true;
  }

登录组件:

 signIn(name, pass) {
    console.log("****** initiated");
    const credentials: IAccount = { UserName: name, UserPassword: pass };
      this.loginService.login(credentials).subscribe(result => 
      {
        console.log("****** response 1");
  //       alert("response 1");

        const response = this.getDecodedAccessToken(result.Token.TokenString);
        if(response==null)
        {
          this.loginResult = response.Status;
          alert(this.loginResult); // better error handling needed
          this.router.navigate([ prefix + '/signin']);
        } else {          
          if (response.signum.toLowerCase() === credentials.UserName.toLowerCase()) {
     //       alert("login ok");
            this.loginInfo.setUserName(response.name);
            this.loginInfo.setUserRole(response.role);
            this.loginInfo.setUserId(response.id);

            this.router.navigate([ prefix + '/home']); // goes here - then "flashes"
          }
        }
      },
      error => { this.errorMessage = <any>error; alert("err " + this.errorMessage); }
    );
    console.log("the end");
  }

还有 loginService:

And the loginService:

  return this.http.post<IResponse>(this.url, JSON.stringify(model), { headers: this.headers }).pipe(
     // map(sdd => {  return sdd; } ) // used to have an alert to check result here
      timeout(990000000),
    //  tap(result => { alert("pong"); console.log('Login result: ' + JSON.stringify(result)) } ),      
      catchError(this.handleError) // this alerts any error - no errors
    );
  }

推荐答案

我发现了这个问题它与单击按钮时的刷新有关，可以通过简单的 return false 修复；当方法/功能完成时

I found the issue It is related to refreshing when clikcing a button and can be fixed by a simple return false; when the method/function is done

我发现这里描述了这个问题:https://github.com/angular/angular/问题/8537

I found this issue described here: https://github.com/angular/angular/issues/8537

登录组件，见最后一行

signIn(name, pass) {
    console.log("****** initiated");
    const credentials: IAccount = { UserName: name, UserPassword: pass };
      this.loginService.login(credentials).subscribe(result => 
      {
        console.log("****** response 1");
  //       alert("response 1");

        const response = this.getDecodedAccessToken(result.Token.TokenString);
        if(response==null)
        {
          this.loginResult = response.Status;
          alert(this.loginResult); // better error handling needed
          this.router.navigate([ prefix + '/signin']);
        } else {          
          if (response.signum.toLowerCase() === credentials.UserName.toLowerCase()) {
     //       alert("login ok");
            this.loginInfo.setUserName(response.name);
            this.loginInfo.setUserRole(response.role);
            this.loginInfo.setUserId(response.id);

            this.router.navigate([ prefix + '/home']); // goes here - then "flashes"
          }
        }
      },
      error => { this.errorMessage = <any>error; alert("err " + this.errorMessage); }
    );
    console.log("the end");
    return false; // THIS was needed
  }

这篇关于Angular 路由的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！