# ionViewCanEnter isn't behaving as expected

**URL:** <https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104>\
**Category:** ionic-v3\
**Created:** [September 3, 2017, 1:21pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104 "2017-09-03T13:21:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 1:21pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/1 "2017-09-03T13:21:36Z")

</div>

According to ionic’s [blog piece on Lifecycle hooks](http://blog.ionic.io/navigating-lifecycle-events/), the `ionViewCanEnter`:

> **ionViewCanEnter:** Fired before entering into a view, allows you to control whether the view can be accessed or not (returning true or false).

According to the docs, `ionViewCanEnter`:

> Runs before the view can enter.

Point is, before a page is entered and displayed, the `ionViewCanEnter` should be resolved to true or false.

In my case, that ain’t happening. There’s a Flash Of _Unwanted_ Content (FOUC)

The behavior I experience is, the page Loads _ **before** _ the `ionViewCanEnter` happens. See what I mean in this 15 seconds video. I reload the page several times. When you see the lag, it is hard to unsee again:

[![](https://global.discourse-cdn.com/ionicframework/original/3X/f/4/f42d4cca2ec98ffed4aed29ffb885bdd27d323db.jpeg "ionViewCanEnter unexpected behavior") ](https://www.youtube.com/watch?v=e7BA4-am_No)

My setup:

```auto
cli packages: (/some/where/node_modules)
    @ionic/cli-utils : 1.9.2
    ionic (Ionic CLI) : 3.9.2
global packages:
    Cordova CLI : 7.0.1 
local packages:
    @ionic/app-scripts : 2.1.3
    Cordova Platforms : android 6.2.3 ios 4.4.0
    Ionic Framework : ionic-angular 3.6.0
System:
    Android SDK Tools : 26.0.2
    Node : v7.10.1
    npm : 4.2.0 
    OS : Linux 4.10

```

**My code**

This is the function in my Authentication service.

```auto
  isLoggedIn() {
    let token = localStorage.getItem('token');
    if (token) {
      return true;
    }
    return false;
  }

```

Then I’m using the above in my `ionViewCanEnter` hook in my component as so:

```auto
  ionViewCanEnter() {
    if(!this.auth.isLoggedIn()) {
      this.navCtrl.setRoot(WelcomePage);
    }
  }

```

My rootpage in my app component is the `HomePage` (localhost:8100/#/home). When user isn’t logged in, they should not see that page.

Yet, in the video above, they see that page, because `ionViewCanEnter` isn’t running on time.

This looks a lot more like a bug to me. Because I think **nothing** should come up UNTIL the hook resolves FIRST. In this case, the page resolved, before the hook kicked in, causing the FOUC.

PS: Before you jump to saying the front-end auth checks is baseless and auth checks should be done server-side, guess what. All my server-side checks are in place. The front-end tweaks for _aesthestics_ sake. You don’t want user to enter long piece of text, only to tell the user after posting: “You’re not logged in”.

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [September 3, 2017, 1:59pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/2 "2017-09-03T13:59:27Z")

</div>

See this: [ionViewCanEnter still executing page load](https://forum.ionicframework.com/t/ionviewcanenter-still-executing-page-load/98050)

---

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 2:16pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/3 "2017-09-03T14:16:26Z")

</div>

In my case, returning a boolean or not, protected page still flashes.

I’ve tried this too, with uncommented `return false`. Still flashes.

```auto
  ionViewCanEnter() {
    if(!this.auth.isLoggedIn()) {
      this.navCtrl.setRoot(WelcomePage);
      return true;
    }
   // return false;
  }

```

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [September 3, 2017, 2:18pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/4 "2017-09-03T14:18:18Z")

</div>

What are you doing in your page constructor?

---

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 2:20pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/5 "2017-09-03T14:20:20Z")

</div>

This is my constructor:

```auto
  constructor(public navCtrl: NavController,
    public auth: AuthenticationProvider,
    public overlay: Overlays) {

  }

```

Nothing in it!

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [September 3, 2017, 2:30pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/6 "2017-09-03T14:30:14Z")

</div>

Well ok. First, I should say that I don’t use ionic guards because I think they’re useless. However, you’re running into the difference between a view and a page. The page is rendered independently of the view. You’re only controlling access to the view with your guard. If you want the page not to render without auth, you need to control that separately. That’s what I do, and I ignore guards completely. Maybe I’ll put them in later for extra cosmetics, I don’t know. But my advice is to organize your navController so you’re only pushing pages the user has access to. The guard is there for if the user goes to a bookmark when not logged in or something.

---

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 2:39pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/7 "2017-09-03T14:39:21Z")

</div>

> [@AaronSterling](#):
>
> But my advice is to organize your navController so you’re only pushing pages the user has access to

Which is what I do. However, I’m using it for a pwa, so entering `#/home` in the browser, if the user is logged in, fine!

But if the user isn’t logged in, that’s where I _don’t want_ whatever, page/view/whatever to show.

In this case, then it means I need something like `ionPageCanEnter`, which doesn’t exist.

The fact that guarding pages is a frustrating experience to implement unlike the `canActivate` feature in Angular, building PWA with Ionic is still not primetime, and not worth to use for a production app, because I can’t ship a website that flickers here and there when users access via deeplinks.

Can Ionic stop pushing the PWA preaching if the framework isn’t ready for primetime, because I’m beginning to regret going with Ionic?

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [September 3, 2017, 2:50pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/8 "2017-09-03T14:50:10Z")

</div>

> [@seanmavley](#):
>
> Can Ionic stop pushing the PWA preaching if the framework isn’t ready for primetime, because I’m beginning to regret going with Ionic?

Tell the devs that if you want. I’ve been posting on this forum for months that Ionic is good for handheld devices, and won’t be a tool for PWAs until at least Ionic 4. If your primary goal is to build a PWA, Ionic 3 is the wrong tool.

---

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 2:55pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/9 "2017-09-03T14:55:04Z")

</div>

> [@AaronSterling](#):
>
> If your primary goal is to build a PWA, Ionic 3 is the wrong tool.

I’ve come to learn that the hard way. I’ll be dropping all ionic for now then.

such a waste of time.

---

<div class="post-metadata">

**Author:** ![seanmavley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/seanmavley/32/100343_2.png) [@seanmavley](https://forum.ionicframework.com/u/seanmavley)\
**Post date:** [September 3, 2017, 3:05pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/10 "2017-09-03T15:05:47Z")

</div>

> [@AaronSterling](#):
>
> PWAs until at least Ionic 4

Ionic 4 likely won’t ship a PWA support fully: [https://github.com/ionic-team/ionic/milestone/56](https://github.com/ionic-team/ionic/milestone/56)

---

<div class="post-metadata">

**Author:** ![jaladid](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jaladid](https://forum.ionicframework.com/u/jaladid)\
**Post date:** [November 6, 2017, 6:51pm UTC](https://forum.ionicframework.com/t/ionviewcanenter-isnt-behaving-as-expected/104104/11 "2017-11-06T18:51:42Z")

</div>

Yes, that approach doesn’t work well.  
if it’s only for the logged in try using a dynamic rootPage in the main component ( App )  
rootPage: any = "HomePage"  
then in the constructor  
if ( auth.isLoggedIn() ) {  
this.rootPage = “TabsPage”  
}