javascript - Is it possible to guard the entirety of an Angular app? - Stack Overflow

admin管理员组

文章数量:1315366

I have my application set up where many of my ponents are protected. However, the user is still able to access the main page "/". I was wondering if it would be possible to redirect the user to /login if they are not authenticated without making ALL of my ponents children of whatever ponent I have on "/". I'll include a modified version of what I have below:

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

Is there some way to add my GuardService to my app-root ponent?

I have my application set up where many of my ponents are protected. However, the user is still able to access the main page "/". I was wondering if it would be possible to redirect the user to /login if they are not authenticated without making ALL of my ponents children of whatever ponent I have on "/". I'll include a modified version of what I have below:

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

Is there some way to add my GuardService to my app-root ponent?

• javascript
• angular
• typescript
• angular-routing

Share Improve this question Follow edited Jul 4, 2018 at 17:32 Michael Sorensen asked Jul 4, 2018 at 16:44 Michael SorensenMichael Sorensen 2,1241717 silver badges2424 bronze badges 6

• @JonasLochmann This is true but, it is always good to try and make your users aware when they can't do anything because they're not authenticated. At least imo. To that end it's usually good to have front and back end security. – Michael Sorensen Commented Jul 4, 2018 at 16:48
• Are you asking about redirecting routes? angular.io/guide/router#redirecting-routes – Eliseo Commented Jul 4, 2018 at 17:26
• This may be a valid feature request, it's probably a nice UX feature in some applications. But the security tag should be removed, because this has nothing to do with security, and will have zero effect on the security of the application (if not a false sense of security). :) – Gabor Lengyel Commented Jul 4, 2018 at 17:31
• Consider it done. – Michael Sorensen Commented Jul 4, 2018 at 17:33
• @Eliseo yes I am specifically this portion of that guide. angular.io/guide/…. My whole app requires the user to be authenticated to do anything so I want to always redirect them to /login if they are not logged in not just set of admin ponents. – Michael Sorensen Commented Jul 4, 2018 at 17:36

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

You can create a ponentless route in the same level as login and move everything other than login inside that route. Then add the guard to that route.

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

check this link for more info

Inside your app root ponent in the constructor you could use the router to catch the instance NavigationStart from the router.

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']
                  }

            }

        });

    }
}

Another option is a CanDeactiveRoute in your routing file

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(ponent: CanComponentDeactivate) {
    return ponent.canDeactivate ? ponent.canDeactivate() : true;
  }
}

Using this check alongside localStorage is a good start, you could use something like server side sessions and a HTTP Interceptor alongside this also.

---

Be advised the user can disable this and it's not meant to obscure or hide sensitive data. Do that on a server using secure transmission mechanisms, you've been warned.

本文标签： javascriptIs it possible to guard the entirety of an Angular appStack Overflow