Angular 如何确定具有路径值的路由

拜托，我在解决这个问题上遇到了一些挑战。 每当我的应用程序启动时，它都会转到没有url路径值（）的DummyComponent。这只有两个按钮，登录和注册。在您单击的按钮上挂起；它将导航到该页面

假设用户单击login按钮以验证系统，一旦成功，用户将重定向到dashboard组件=>

现在，即使用户登录并手动将url更改为。这没有路径值，如何将用户重定向回

我知道我可以使用canActivate守卫来保护我的路线，但我面临的挑战是；如何确定用户何时访问没有路径值的url（即登录时），以便将用户重定向回仪表板…。但是，当用户没有登录并且访问url时没有路径，它应该直接转到初始DummyComponent

这是我的路线

const routes4: Routes = [
   {path: '', component: DummyComponent},
   {
     path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard],
     children: [
      { path: 'dashboard', component: DashboardComponent },
       { path: 'user/list', component: PatientsComponent },
       { path: 'user/new', component: PatientComponent },
       { path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
     ]
   },
];
****
canActivate(): boolean {
      if (this.authService.isLoggedIn()) {
        return true;
      }
      this.pnotifyService.error('Error', 'You do not have sufficient permission');
      this.router.navigate(['/login']);
      return false;
  }

我做了一些研究，但无法掌握像我这样的情景。任何关于如何解决这一问题的想法都将受到高度赞赏。

---

非常感谢。

您可以使用另一个gaurd根据您的情况将用户重定向到正确的路径

大概是这样的：

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {
  canActivate() {

    if (this.authService.isLoggedIn()) {
         // when user is logged in you redirect it to dashboard url
         this.router.navigate(['dashboard']);
         return true;
    }
  }
 //Constructor 
 constructor(private router: Router, private authService: AuthService) { }
}

const routes4: Routes = [
   {path: '', component: DummyComponent},
   {
     path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, RedirectGuard],
     children: [
      { path: 'dashboard', component: DashboardComponent },
       { path: 'user/list', component: PatientsComponent },
       { path: 'user/new', component: PatientComponent },
       { path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
     ]
   },
];

canActivate(): boolean {
      if (this.authService.isLoggedIn()) {
        this.router.navigate['/dashboard'] //redirect if the user is logged in
        return true;
      }
      this.pnotifyService.error('Error', 'You do not have sufficient permission');
      this.router.navigate(['/login']);
      return false;
  }

现在，您可以在路径中使用它，如下所示：

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {
  canActivate() {

    if (this.authService.isLoggedIn()) {
         // when user is logged in you redirect it to dashboard url
         this.router.navigate(['dashboard']);
         return true;
    }
  }
 //Constructor 
 constructor(private router: Router, private authService: AuthService) { }
}

const routes4: Routes = [
   {path: '', component: DummyComponent},
   {
     path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, RedirectGuard],
     children: [
      { path: 'dashboard', component: DashboardComponent },
       { path: 'user/list', component: PatientsComponent },
       { path: 'user/new', component: PatientComponent },
       { path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
     ]
   },
];

canActivate(): boolean {
      if (this.authService.isLoggedIn()) {
        this.router.navigate['/dashboard'] //redirect if the user is logged in
        return true;
      }
      this.pnotifyService.error('Error', 'You do not have sufficient permission');
      this.router.navigate(['/login']);
      return false;
  }

更新：

您可以重用现有代码来实现此行为

大概是这样的：

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {
  canActivate() {

    if (this.authService.isLoggedIn()) {
         // when user is logged in you redirect it to dashboard url
         this.router.navigate(['dashboard']);
         return true;
    }
  }
 //Constructor 
 constructor(private router: Router, private authService: AuthService) { }
}

const routes4: Routes = [
   {path: '', component: DummyComponent},
   {
     path: '',
     runGuardsAndResolvers: 'always',
     canActivate: [AuthGuard, RedirectGuard],
     children: [
      { path: 'dashboard', component: DashboardComponent },
       { path: 'user/list', component: PatientsComponent },
       { path: 'user/new', component: PatientComponent },
       { path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
     ]
   },
];

canActivate(): boolean {
      if (this.authService.isLoggedIn()) {
        this.router.navigate['/dashboard'] //redirect if the user is logged in
        return true;
      }
      this.pnotifyService.error('Error', 'You do not have sufficient permission');
      this.router.navigate(['/login']);
      return false;
  }

---

@谢谢你的回复。我尝试了这个解决方案，但我的选项卡冻结并继续旋转，而没有呈现仪表板。当我检查控制台时，我得到一个节流警告，它不断循环。。。。。再看看解决方案，AuthGuard和RedirectGuard似乎都有冲突，原因我现在还不清楚。@Asim…非常感谢您的反馈。虽然我已经找到了一种方法来处理这个问题，这也类似于你提出的解决方案，同样有效。我将把这标记为一个答案。非常感谢！