# Ionic 2 Route Guards?

**URL:** <https://forum.ionicframework.com/t/ionic-2-route-guards/57422>\
**Category:** ionic-v3\
**Created:** [July 13, 2016, 10:22pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422 "2016-07-13T22:22:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 13, 2016, 10:22pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/1 "2016-07-13T22:22:32Z")

</div>

The new router v3 for Angular 2 is in beta, however i have noticed a few new things very cool, the one i want to discuss is route guards, basically providing a way to redirect or stop navigation if user is not logged in, and if it has permission to do so.

I’m basically asking for how does ionic face Authentication and Authorization.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 13, 2016, 10:29pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/2 "2016-07-13T22:29:38Z")

</div>

You can achieve this sort of effect with custom attribute directives.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 14, 2016, 12:08am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/3 "2016-07-14T00:08:06Z")

</div>

That would work with hiding part of the UI, but i’m asking about cancel and redirect routing.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 14, 2016, 12:11am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/4 "2016-07-14T00:11:55Z")

</div>

I haven’t used this technique with Ionic yet, so I’m not certain about where to hook it into the lifecycle and navigation controller, but I believe the fundamental idea should translate.

Something like this:

```auto
<div gated>
... authorized-only content
</div>

```

```auto
@Directive({
  selector: '[gated]'
})
export class AuthenticationGatekeeper {
  constructor(nav:NavController, auther:Authenticator) {
    if (!auther.isAuthenticated()) {
      nav.push(LoginPage);
    }
  }
}

```

…I have used in vanilla Angular applications before.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 14, 2016, 3:30am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/5 "2016-07-14T03:30:57Z")

</div>

With that comes a little problem about transitions, if that push triggers before the transition animation finishes the navigation breaks, for me happens the same when i open an alert too soon.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 14, 2016, 4:00am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/6 "2016-07-14T04:00:24Z")

</div>

As you’re actively involved in all the issues I’ve seen on this topic, there probably isn’t much I can say to you that you haven’t already seen, but hopefully those are implementation details that don’t interfere with the notion of using an attribute directive to achieve your goals, at least until the new router is usable with Ionic.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 14, 2016, 4:14am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/7 "2016-07-14T04:14:19Z")

</div>

I guess i’ll have to stick with `ionViewWillEnter` page life cycle hook for the time being, however idk how would it play with transitions, i’ll test tomorrow.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 15, 2016, 3:12pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/8 "2016-07-15T15:12:22Z")

</div>

Just to chime in on this, there is still a lot of working being done on the router from both ionic’s side and angular’s side. I’d hold off for now on things like this. We have some new features coming down the pipeline that will make this easy.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 15, 2016, 6:32pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/9 "2016-07-15T18:32:57Z")

</div>

In my current situation i have this implemented as a global service that holds the login state, then in each component i check with the service what the login token is and if none, redirect to login, i hope in the future, instead of opening the page and then redirecting, i could check before and cancel or redirec to root instead of those 2 routing steps.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [July 27, 2016, 9:49pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/10 "2016-07-27T21:49:42Z")

</div>

@mhartington Man can i just insert the new router with the `IonicBootstrap()` method? i’m about to start a project where route guards would shine like diamond, as far as i’ve read somewhere someone of the staff said the angular 2 router was deactivated because was under heavy dev changes.

Does that mean that if we try to use it Ionic blocks the router? or just that you guys don’t support it and thus we lose the navigation transitions when using it?

---

<div class="post-metadata">

**Author:** ![mburger81](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@mburger81](https://forum.ionicframework.com/u/mburger81)\
**Post date:** [August 10, 2016, 1:16pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/11 "2016-08-10T13:16:13Z")

</div>

Hi @luchillo17,  
for my last news ionic2 will never inlcude new angular2 router, but they will release their own router using urls. But this will happening only in a couple of weeks, probably for beta.12 or RC.1

Can you share your solution? There are many other users like us, which needs this as soon as possible.

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [August 10, 2016, 8:04pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/12 "2016-08-10T20:04:29Z")

</div>

We’re delaying the process, right now i want to test if putting the new router by my own in the `IonicBootstrap()` method would work, and how would that play with the styles of ionic components, off course if it does indeed work, since as i mentioned before i read that Ionic disabled the Angular router.

---

<div class="post-metadata">

**Author:** ![mburger81](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@mburger81](https://forum.ionicframework.com/u/mburger81)\
**Post date:** [August 11, 2016, 6:32am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/13 "2016-08-11T06:32:18Z")

</div>

I don’t think it would work your way. But let us know your result! Thx

---

<div class="post-metadata">

**Author:** ![gaurav](https://avatars.discourse-cdn.com/v4/letter/g/b487fb/32.png) [@gaurav](https://forum.ionicframework.com/u/gaurav)\
**Post date:** [August 31, 2016, 9:58am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/14 "2016-08-31T09:58:24Z")

</div>

@mhartington Any updates on this ? Actually router Authorization is becoming really important according to the user roles  
@luchillo17 Can you please share what worked for you ? I found somewhere that [CanActivate](http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html) can be used for this althogh still not sure, so anyone used this can give his feedbacks

[1] - [http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html](http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html)  
[2] - [canActivate on ionic2?](https://forum.ionicframework.com/t/canactivate-on-ionic2/44240)

---

<div class="post-metadata">

**Author:** ![luchillo17](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luchillo17/32/78209_2.png) [@luchillo17](https://forum.ionicframework.com/u/luchillo17)\
**Post date:** [September 1, 2016, 2:00pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/15 "2016-09-01T14:00:45Z")

</div>

@gaurav Sorry dude, not much to tell, right now we let the page transition and `ionViewDidEnter` we ask for the permissions, that’s just the other way around i would like it to work, i would like to have it ask before the navigation starts so the page only get’s open when the user does have the permission instead of opening then validating.

Idk if `CanActivate` works in Ionic since that one was from the deprecated router, also the Ionic router doesn’t make any mention about similar functionality in their router, i’ll have to test.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 1, 2016, 2:14pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/16 "2016-09-01T14:14:15Z")

</div>

To manage Authentication and Authorization, I followed the post below and I wrote an interceptor of every http requests of my app to my server. In that way, if the server send back to the app “not logged in”, this will be catched and the user will then be redirected to the login screen.

```
https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/

```

The only difference I implemented in Ionic versus the link above is that instead of doing the redirect in the service itself I use an EventEmitter (from the service to the app root).

---

<div class="post-metadata">

**Author:** ![rastographics](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rastographics](https://forum.ionicframework.com/u/rastographics)\
**Post date:** [October 28, 2016, 5:48pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/17 "2016-10-28T17:48:23Z")

</div>

@reedrichards could you share your EventEmitter code please? thanks

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 28, 2016, 6:31pm UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/18 "2016-10-28T18:31:32Z")

</div>

Nothing special there

In the interceptor

```
requestIntercepted:EventEmitter<number> = new EventEmitter<number>();

```

And where you want to subscribe to the event

```
(<YourInterceptor> this.http).requestIntercepted.subscribe((errorCode: number) => this.doStuffsInCaseItsNotOk());
```

---

<div class="post-metadata">

**Author:** ![Tanzeelrana901223](https://avatars.discourse-cdn.com/v4/letter/t/f17d59/32.png) [@Tanzeelrana901223](https://forum.ionicframework.com/u/Tanzeelrana901223)\
**Post date:** [April 29, 2017, 4:37am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/19 "2017-04-29T04:37:48Z")

</div>

can we use the ionViewWillEnter() ?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [April 29, 2017, 8:49am UTC](https://forum.ionicframework.com/t/ionic-2-route-guards/57422/20 "2017-04-29T08:49:43Z")

</div>

For there record and since I can’t edit my EventEmitter code above, I just gonna add that here: it’s kind of a bad practice to use EventEmitter (except when it goes to components output). Therefore I change that EventEmitter code with an Observable like following:

```
private requestInterceptedSource: Subject<number> = new Subject<number>();
requestIntercepted:Observable<number> = this.requestInterceptedSource.asObservable();

```

The subscription part stay the same.

[Next page](https://forum.ionicframework.com/t/ionic-2-route-guards/57422.md?page=2)
