如何保护所有非子路由？

Question

我在我的 angular 6 应用程序中创建了一个路由模块 (app.routing.ts)。我已经在我的应用程序中添加了多条路由，但没有在任何地方为我的路由使用 child 指令（是的不好的做法，但现在我在我的应用程序的另一部分也添加了动态路由并且不想要更改整个结构，因为这样做需要很长时间）。

我想知道是否有一种方法可以全局使用 canActivate: [AuthGuardService]（检查用户是否已登录）用于除 root 之外的所有路由。我已经检查了一个类似的答案 here 但是守卫似乎没有正常工作并且仍然加载页面。（也许是因为我没有任何子路线）。

此外，我认为该方法也可能不是最好的方法，因为在那种情况下，Guard（消耗层）能够知道哪个层正在消耗它的方法（imo 不是 mvc 的最佳方法模式，当然我对路由模块所做的也不漂亮）。有没有办法以更简洁的方式实现这一目标？

app.routing.ts

export const routes: Routes = [
  {
    path: 'main',
    component: MainComponent,
    pathMatch: 'full'
  },
  {
    path: 'search/:id',
    component: GlobalSearchComponent
  },
  {
    path: '',
    canActivate: [AuthGuardService],
    component: LoginComponent,
  },
  {
    path: 'reset',
    component: ResetPasswordComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
  },
  {
    path: 'knowledge-base/create',
    component: KnowledgeBaseCreateComponent
  },
  {
    path: 'knowledge-base/detail/:id',
    component: KnowledgeBaseDetailComponent
  },
  {
    path: 'knowledge-base/edit/:id',
    component: KnowledgeBaseEditComponent
  },
  {
    path: 'projects/detail/:id',
    component: ProjectDetailComponent
  },
  {
    path: 'projects/create',
    component: ProjectCreateComponent
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

authguard.service

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';

/**
* This injector provides the auth-guard service throughout the application.
*/
@Injectable({
  providedIn: 'root'
})

/**
* The auth guard service is used to prevent unauthenticated users from
* accessing restricted routes, it's used in app.routing.ts to protect the home
* page route
*/
export class AuthGuardService {
  /**
  * The constructor initializes the ToastrService & TranslatePipe in the component.
  */
  constructor(private toastr: ToastrService,
    private translate: TranslatePipe,
    private router: Router) { }
  /**
   * This method checks if the user is authorized to access a certain route.
   *
   * @param  route
   * @param  state
   * @return
   */
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (localStorage.getItem('jwtToken')) {
      return true;
    } else {
      if (this.router.url !== '/') {
        let error = this.translate.transform("generic[responses][error][401]");
        this.toastr.warning(error);
        this.router.navigate(['']);
      } else {
        return true;
      }
    }
  }
}

Answer 1

实现它的简洁方法是将它们包装在一条路线的 children 中。你说你知道这一点，但你也提到它会导致你改变整个结构 - 但事实并非如此。您可能想过使用 loadChildren，这实际上会导致更大的变化。这是使用 children

包装 knowledge-base 路线的示例

  {
    path: 'knowledge-base',
    canActivate: [AuthGuardService],
    children: [
        {
          path: '',
          redirectTo: 'knowledge-base/create',
          pathMatch: 'full'
        },
        {
          path: 'create',
          component: KnowledgeBaseCreateComponent
        },
        {
          path: 'detail/:id',
          component: KnowledgeBaseDetailComponent
        },
        {
          path: 'edit/:id',
          component: KnowledgeBaseEditComponent
        }
    ]
  }

这就是您必须更改的所有内容，基本上只需将其包装在 children 中即可。您也可以将此方法应用于其他路线。或者，如果您只想使用 RouterGuard 一次，您可以创建类似 path: 'main' 的内容，然后将所有内容都包装在那里

Answer 2

根据最佳实践，您应该分层组织路由并使用子级嵌套子级 routes/components。 Route Guards 也以同样的方式工作，这就是我们有 canActivateChild 守卫的原因。

您仍然可以将路由重构为仅具有父子（嵌套）关系并使用 canActivateChild 保护。我认为改变这一点不会产生重大影响。如果你在模块中进行延迟加载和分离路由，那么它可能会成为一个很大的变化。

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
    Observable<boolean> | Promise<boolean> | boolean {
       return this.canActivate(route, state);
}

{ path: 'servers',  canActivateChild: [AuthGuard], component: ServersComponent,  children: [
      { path: ':id', component: ServerComponent, resolve: { server: ServerResolver } },
      { path: ':id/edit', component: EditServerComponent, canDeactivate: [canDeactivateGuard] }
]}

如何保护所有非子路由？

How to make all non-child routes guarded?

angular

typescript

angular-router

angular-router-guards