Question

在我的应用程序路由模块中，我想将用户重定向到仪表板（如果已登录）或主页（如果未登录）。

我正在使用警卫进行检查。

来自 app-routing.module.ts

 class LoggedInUser implements CanActivate {
  constructor(@Inject(LoginService) private loginService: LoginService) {}

  canActivate() {
    return new Promise<boolean>((resolve, reject) => {
      this.loginService.isAuthenticated({
        isLoggedIn(message: string, loggedIn: boolean) {
          resolve(loggedIn);
        }
      });
    });
  }
}

const routes: Routes = [
  { path: '', loadChildren: 'app/dashboard/dashboard.module#DashboardModule', canActivate: [LoggedInUser] },
  { path: '**', loadChildren: 'app/homepage/homepage.module#HomepageModule' }
];

如果我已登录，这允许我访问仪表板，这是我想要的，但不将我重定向到主页。

如何启用此回退？我一直在寻找几个小时，而我所能找到的只是一些以编程方式调用路由器的代码示例，以达到像'/ login'这样的专用路径，但我不想要这样的路径。

Answer 1

您可以使用路由器手动将它们导航到登录页面，这是我想到的一个粗略的想法：

 class LoggedInUser implements CanActivate {
  constructor(@Inject(LoginService) private loginService: LoginService, private router: Router) {}

  canActivate() {
    return new Promise<boolean>((resolve, reject) => {
      this.loginService.isAuthenticated({
        isLoggedIn(message: string, loggedIn: boolean) {
          resolve(loggedIn);
        }
      });
    }).then(loggedIn => {
       if(!loggedIn) {
          this.router.navigate['login'];
       }
       return loggedIn;
    });
  }

更新：7+（使用urlTree）

引自here

现在，对于CanActivate，CanActivateChild和CanDeactivate，有一个第三种选择;这些警卫可以直接返回UrlTree。在这些场景，当前导航被取消，以及新的导航已创建，它将路由到返回的指定路径 UrlTree。例如，如果用户未通过身份验证保护，您可以想要将该用户直接重定向到登录页面。

代码来自here

import { Injectable } from '@angular/core';
import { CanActivate,
         ActivatedRouteSnapshot,
         RouterStateSnapshot,
         Router,
         UrlTree } from '@angular/router';

@Injectable()
export class CanActivateRouteGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    const url = 'target';
    const tree: UrlTree = this.router.parseUrl(url);
    return tree;
  }
}

Answer 2

这可能会起到作用：确保你有一个家庭的默认路线。我在你的路线上看不到它，我觉得这很不寻常。

{ path: '', redirectTo: 'home', pathMatch: 'full' }

另外设置您的家庭路线：

path: 'home', (loadChildren if lazy loading, component if not, etc).

我很确定在最近的一个项目中我或多或少有同样的问题，这就是你所期望的常用后卫的诀窍。

Angular 5路线后退

2 个答案: