是否可以保护整个 Angular 应用程序？

Question

我设置了我的应用程序，其中我的许多组件都受到保护。但是，用户仍然可以访问主页“/”。我想知道是否可以将用户重定向到 /login 如果他们没有经过身份验证而不使我的所有组件成为我在“/”上拥有的任何组件的子级。我将包含以下内容的修改版本：

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "test",
    component: TestComponent
  },
  {
    path: "protected",
    canActivate: [AuthGuardService],
    component: ProtectedComponent
  },
  {
    path: "alsoprotected/:id",
    component: AlsoProtectedComponent,
    canActivate: [AuthGuardService],
    children: [
      { path: "child1", component: ChildOneComponent},
      { path: "child2", component: ChildTwoComponent},
      { path: "child3", component: ChildThreeComponent },
      { path: "child4", component: ChildFourComponent },
      { path: "child5", component: ChildFiveComponent },
      { path: "child6", component: ChildSixComponent },
      { path: "child7", component: ChildSevenComponent }
    ]
  },
  {
    path: "protectedsettings",
    canActivate: [AuthGuardService],
    component: SettingsComponent
  }
];

有什么方法可以将我的 GuardService 添加到我的 app-root 组件中吗？

Answer 1

在构造函数中的应用程序根组件中，您可以使用路由器从路由器捕获实例 NavigationStart。

export class AppComponent {

    constructor(private router: Router) {

        router.events.subscribe( (event: Event) => {

            if (event instanceof NavigationStart) {
                //Check either LocalStorage or cookies for value
                  if(!localStorage.GetItem('hasLoaded')){
                     this.router.navigate['./login']
                  }

            }

        });

    }
}

另一个选项是路由文件中的 CanDeactiveRoute

import { Injectable }    from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable }    from 'rxjs';

export interface CanComponentDeactivate {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

将此检查与 localStorage 一起使用是一个好的开始，您可以同时使用服务器端会话和 HTTP Interceptor 之类的东西。

请注意，用户可以禁用此功能，这并不是要掩盖或隐藏敏感数据。在使用安全传输机制的服务器上执行此操作，您已被警告。

Answer 2

您可以在与登录相同的级别创建一个无组件路由，并将除登录以外的所有内容移动到该路由中。然后将守卫添加到该路线。

        const routes: Routes = [
      {
        path: "login",
        component: LoginComponent
      },
      {
        path: "",
        canActivate: [AuthGuardService],
        children: [
          {
            path: "test",
            component: TestComponent
          },
          {
            path: "protected",
            canActivate: [AuthGuardService],
            component: ProtectedComponent
          },
          {
            path: "alsoprotected/:id",
            component: AlsoProtectedComponent,
            canActivate: [AuthGuardService],
            children: [
              {path: "child1", component: ChildOneComponent},
              {path: "child2", component: ChildTwoComponent},
              {path: "child3", component: ChildThreeComponent},
              {path: "child4", component: ChildFourComponent},
              {path: "child5", component: ChildFiveComponent},
              {path: "child6", component: ChildSixComponent},
              {path: "child7", component: ChildSevenComponent}
            ]
          },
          {
            path: "protectedsettings",
            canActivate: [AuthGuardService],
            component: SettingsComponent
          }
        ]
      }
    ];

查看此 link 了解更多信息

是否可以保护整个 Angular 应用程序？

Is it possible to guard the entirety of an Angular app?

javascript

typescript

angular-routing

angular