Question

请，我在解决这种情况时遇到了一些挑战。每当我的应用启动时，它都会转到一个没有url路径值（http://localhost:4200/）的DummyComponent。它只有两个按钮，登录和注册。等待您单击的任何按钮；它导航到页面。

假设用户单击登录按钮以对系统进行身份验证，一旦成功，该用户将被重定向到仪表板组件=> http://localhost:4200/dashboard。

现在，即使用户已登录并手动将URL更改为http://localhost:/4200。这没有路径值，如何将用户重定向回http://localhost:4200/dashboard

我知道我可以使用canActivate守护程序来保护自己的路线，但是我面临的挑战是；如何确定用户何时访问不带路径值的URL，即http://localhost:4200/（登录时），以便可以将用户重定向回仪表板？ …。但是同样，当用户未登录并没有路径访问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;
  }

我做了一些研究，但无法将自己的情况放在我的情况下。任何有关如何解决此问题的想法将不胜感激。非常感谢。

Answer 1

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

类似这样的东西：

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;
  }

如何确定具有路径值的路线

1 个答案: