如何使所有非儿童路线得到保护？

Question

我在我的角6应用程序(app.routing.ts).中创建了一个路由模块我在我的应用程序中添加了多个路由，但没有为我的路由使用child指令(是的，但现在我在应用程序的另一部分添加了动态路由，并且不想更改整个结构，因为这需要很长的时间)。

我想知道是否有一种方法可以在全球范围内使用canActivate: [AuthGuardService] (它检查用户是否登录)用于除根之外的所有路由。我已经查看了一个类似的答案，here，但守卫似乎没有正常工作，仍然加载页面。(可能是因为我没有任何儿童路线)。

此外，我认为该方法也可能不是最好的方法，因为在这种情况下，卫队(消耗的层)能够知道哪个层正在使用它的方法(而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，这实际上会导致更大的变化。下面是使用knowledge-base包装children路由的示例

  {
    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

根据最佳实践，您应该分层组织路由，并使用子路由/组件嵌套子路由/组件。路由警卫也以同样的方式工作，这就是为什么我们有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] }
]}