Re: [AngularJS] Angular2, proper way to redirect to login route?

[Mark Rathwell]

I'm interested in this also.  I have spent most of the day trying to make something work by overriding the router-outlet, but have only come up with dirty hacks that sort of work.  

There is literally zero information out there on authentication with Angular 2 that is still current and valid.  It is such a standard and critical thing, I must be missing something.  

On Tue, Dec 29, 2015 at 5:17 AM, Martin Wawrusch <mar...@wawrusch.com> wrote:

Hi guys, I am trying to set up routing with authentication properly. 

So far I am using the router's canActivate decorator to determine if that component can be shown or not. The question is: where do I put the redirect to a login page? Doing a hard redirect with window.location within the canActivate check seems to be wrong). Should I override the router-outlet instead, and if so, how?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Mark Rathwell]

Looks like I missed the obvious on this one.  You can just subscribe to route transitions and do the authentication checks and redirections there.  Subscribing in the top-level component constructor works as expected for me:

this.router.subscribe((nextValue) => {

    if (nextValue !== 'login' && nextValue !== 'register' && !this.sessionService.accessToken()) {

        this.sessionService.data['urlRedirectAfterLogin'] = nextValue;

        this.router.navigate(['/Login']);

    }

});

[Günter Zöchbauer]

I think canActivate and Activate router lifecycle methods are the official way

https://github.com/angular/router/issues/100

[Mark Rathwell]

Where do you do the redirect to the login component here though (when canActivate() fails)?  It's obviously a nicer AOP style, but I've never seen where people are doing the login redirect with this method.

[Günter Zöchbauer]

I have seen discussions in Gitter or GitHub issues in the Angular repo, where they do some workarounds to get hold of an injector (using a gloal variable or something) in `canActivate()` and then request the router and call `router.navigate...`

(if I remember correctly)

[Mark Rathwell]

Thanks, I'll have to do some digging.  Still seems a bit hacky at this point, not to mention, you then need to track _why_ canActivate() was false, as one could certainly have other valid conditions on that, and you would only want to redirect to login if a login is required.  Hopefully it will smooth out in time.

[Günter Zöchbauer]

Router is work in progress, many issues are akowledged.

[Jordan Ide]

Currently I'm extending RouterOutlet and implementing my logic there.  It's not tested too extensively yet so there may be bugs, so far so good though.

You can find the pastie of the class here http://pastie.org/private/xdhe105wmxwkenkxoujg

It handles navigating away from login and towards login based on the observer in my UserService.

If anybody does see any glaring bugs or flaws in this I'd be interested to hear them :)

[Eric Martinez]

As an example for those who are extending RouterOutlet you can check this example from auth0 https://github.com/auth0/angular2-authentication-sample/blob/master/src/app/LoggedInOutlet.ts