Angular2 Router - Anyone know how to use canActivate in app.ts so that I can redirect to home page if not logged in

Question

I'm using typescript and angular 2.

Current attempt under my constructor in my app.ts file:

   canActivate(instruction) {           
               console.log("here - canActivate");
               console.log(instruction);

               this.router.navigate(['Home']);  
   }

It currently doesnt get hit. Any idea why?

score 12 · Answer 1 · edited Mar 09 '16 at 21:08

12

So the documentation looks like this is what it exports.

export CanActivate(options : CanActivateAnnotation) : (hook: (next: ComponentInstruction, prev: ComponentInstruction) =>
                     Promise<boolean>| boolean) => ClassDecorator

@CanActivate((next, prev) => {
      // This must prove to be true for the component @ this route to load
      if(next.urlPath != '/Login'){ 
         return Promise.resolve(this._authService.getIsAuth() 
         && localStorage.getItem('authToken')
      }
      /*
       If CanActivate returns or resolves to false, the navigation is 
       cancelled. If CanActivate throws or rejects, the navigation is also
       cancelled. If CanActivate returns or resolves to true, navigation 
       continues, the component is instantiated, and the OnActivate hook of 
       that component is called if implemented.
      */
   }
);

At the bottom of the Angular2 documentation they add this snippet : exported from angular2/router https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

So if you are looking to do redirection from a higher level. You would not use the CanActivate decorator you would do the following.

import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
import {Login} from '../login/login';
import {UserService} from '../../Services/userService'; // a service to handle auth

@Directive({
  selector: 'router-outlet'
})
export class AuthRouterOutlet extends RouterOutlet {
  publicRoutes: any;
  private parentRouter: Router;

  constructor(private _userService:UserService, _elementRef: ElementRef, _loader: DynamicComponentLoader,
              _parentRouter: Router, @Attribute('name') nameAttr: string) {
    super(_elementRef, _loader, _parentRouter, nameAttr);

    this.parentRouter = _parentRouter;
    this.publicRoutes = {
      '/login': true,
      '/signup': true
    };
    // publicRoutes will be the routes auth is not needed for.
  }

  activate(instruction: ComponentInstruction) {
    var url = this.parentRouter.lastNavigationAttempt;
    if (!this.publicRoutes[url] && this._userService.getAuth()) {
      // todo: redirect to Login, may be there a better way?
      this.parentRouter.navigateByUrl('/login');
    }
    return super.activate(instruction);
    // we return super.activate(instruction) here so the router can activate the requested route and it's components.
  }
}

This implementation handles any new request to a directive and runs the activate function where your route authentication logic will be. The code above would be called something like AuthRouterOutlet. and you would have to add it to your app.ts via the

directives: [ AuthRouterOutlet]

edited Mar 09 '16 at 21:08

Hongbo Miao

45,290
60
174
267

answered Jan 13 '16 at 05:49

inoabrian

3,762
1
19
27

Where do I import this annotation from? – AngularM Jan 13 '16 at 08:30
I added it to my answer it`s in angular2/router – inoabrian Jan 13 '16 at 14:00
Can I add the @CanActivate to my app.ts file? Because I want to redirect the user to another route if they are not authenticated – AngularM Jan 13 '16 at 14:06
I think you will need to put it on the components where you want to over ride their navigation. – inoabrian Jan 13 '16 at 14:29
I want it in a global area like app ts so I can redirect if users try to reach pages without logging in – AngularM Jan 13 '16 at 14:32
I added the higher level route authentication to my answer. – inoabrian Jan 13 '16 at 14:41
I've implement your answer above but do I need to link it to my app,ts file? because its not hitting the LoggedInRouterOutlet code above – AngularM Jan 26 '16 at 15:41
Ok I've got it hitting it, but it still hits the internal page component – AngularM Jan 26 '16 at 15:44
could you put it in a plnkr just your app.ts file – inoabrian Jan 26 '16 at 15:45
Not sure how to do that. – AngularM Jan 26 '16 at 15:48
This is my current code : activate(instruction: ComponentInstruction) { this.parentRouter.navigate(['/Home']); return super.activate(instruction); } – AngularM Jan 26 '16 at 15:48
For some pages it navigates to Home and for other pages that are internal it doesnt, thus causing a component error as its hitting the component – AngularM Jan 26 '16 at 15:49
remove the return statement.. What happens if you do that? If you return super.activate(instruction) it will continue to the navigated route and not redirect. – inoabrian Jan 26 '16 at 15:49
I get typescript error - property activate are incompatible – AngularM Jan 26 '16 at 15:53
Are you sure you are using the tag instead of – inoabrian Jan 26 '16 at 15:55
I didnt do that, I have now and none of my routes work – AngularM Jan 26 '16 at 16:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101694/discussion-between-inoabrian-and-angularm). – inoabrian Jan 26 '16 at 16:03
any luck with the redirect to home route ? – AngularM Jan 27 '16 at 12:52
@inoabrian Can you show us an example of how to use LoggedInRouterOutlet? How do you register it in boot.ts? I am currently getting "Cannot resolve all parameters for 'Router'(?, ?, ?)". Thanks. – pbz Feb 04 '16 at 14:33
superb solution...bravo ! – micronyks Feb 13 '16 at 06:54
`ComponentInstruction` does not exist yet in the new v 3.0.0.0-alpha8 router. How do we get around this? – TetraDev Jun 28 '16 at 16:41
This is a common requirement and core behavior that the framework can and should provide. It's not the case that thousands of developers should hack together an override of the routing function. – Rick O'Shea Aug 01 '16 at 01:36

score 5 · Answer 2 · edited May 23 '17 at 11:47

5

With the new beta release of the router, you can also see my answer here on how to use the CanActivate interface:

https://stackoverflow.com/a/38369948/1944351

Using the decorator as mentioned in other answer is fine too.

edited May 23 '17 at 11:47

Community

1
1

answered Jul 14 '16 at 09:08

Nilz11

1,242
14
16

score 2 · Answer 3 · answered Jun 21 '16 at 22:27

These answers are no longer valid in the RC candidate as of 22/6/16.

There is a lot of talk a new solution for @CanActivate annotation but you can revert back to using the angular-2/router-deprecated version in the interim.

If you want to follow the updates to this area if you want to use the newer router implementation please check out these two github issues:

Sorry there is no complete answer right now, if I see any further progress on this I'll update this reply. I'm searching for an elegant solution as well.

For the interim I just used a ngIf='fooObject' in a div to check for object being used in a child directive is populated/truthy and then render the rest of the components html. It's not ideal but it does work consistently right now. May help you or not depending on your use case. I don't need to redirect, only check my data has resolved for the display of my component.

score 1 · Answer 4 · answered Jan 12 '16 at 21:56

1

From here:

https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

CanActivate is an annotation, not a function. You use it like this:

@Component({selector: ... })
@CanActivate(()=>console.log('Should the component Activate?'))
class AppComponent {

}

routerOnActivate IS a function you use inside your component:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

answered Jan 12 '16 at 21:56

Langley

5,326
2
26
42

for the routerOnActivate where do I import it from? – AngularM Jan 12 '16 at 22:00
The angular.io documentation is poor for examples. – AngularM Jan 12 '16 at 22:02
1

The @CanActivate(()=>console.log('Should the component Activate?')) code doesnt seem to work – AngularM Jan 12 '16 at 22:04
from https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html, you import the OnActivate interface , but its not necesary, as long as your Component has that method, the router will call it if your method gets resolved by a route – Langley Jan 12 '16 at 22:07
And I can put this in my app.ts file? – AngularM Jan 12 '16 at 22:30
Have you gone through the `` at all? – Langley Jan 12 '16 at 22:32
@AngularM - looks like the routerOnActivate is from the following. exported from angular2/router defined in angular2/src/router/interfaces.ts (line 7) – inoabrian Jan 13 '16 at 03:56
@inoabrian did you get anywhere with the redirect to homepage? – AngularM Jan 27 '16 at 10:55

score 0 · Answer 5 · answered May 13 '17 at 21:16

0

@CanActivate was removed. See more details here.

You should now use route.canActivate

answered May 13 '17 at 21:16

Ori Calvo

426
5
6

Angular2 Router - Anyone know how to use canActivate in app.ts so that I can redirect to home page if not logged in

5 Answers5

Linked