Ionic 3 lazy loading route authentication. How? What's the best practice?

Ionic Framework ionic-v3
1

Dear community,

I’d like to do route authentication in ionic 3 like how I do it with ionic v1(ui-router) but I still don’t know how.

Here is the logic:
App start---->List Page—>Details Page
|(redirect to if not authenticated)
Login Page
The default home page is the list page, if user’s not authenticated, they will be redirected to the login page. In Ionic 1, UI router does it by listening to route change events:
$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {}

With the ionic3 Auth Guard, How can I achieve the same?

IonViewCanEnter doesn’t do the same actually. OK, if I push to a page manually from a previous page, I can use the callback to do the redirection. But what if I set my root page to the “List Page”, How can I do the redirect?
And What if user just copy paste the link on the browser?

Ionic claims that it targets mobile and Web and it does PWA, however it seems that there are many issues with route authentication when using browser. Yes, it’s simpler but it’s not powerful enough, IMHO. Maybe it’s just me who doesn’t know how to use it.

I really want to migrate my app to ionic 3+ but things like this are stopping me from making the move.

Any help would be much appreciated!

2

What’s the problem with IonViewCanEnter or IonViewWillEnter?

Have an auth service. On one of these lifecycle events have the auth service check authentication status, if invalid, set the nav root to the Login Page.

3

There are. PWA is not ready.

4

Hi Beck,
Many thanks for your help. IonViewCanEnter can only detect True or False, it can’t do any redirection by itself. It depends on the callback to do so. If on the initialization of my App, I set “ListPage” as my default page, how can I do that then?
I tried IonViewWillEnter, just to see if it works as expected:

ListPage.component.ts

  ionViewWillEnter () {
  
  
    this.storage.ready().then(() => this.storage.get('token'))
    .then(token => {
      if(token == null || token == '') {
        this.navCtrl.setRoot('LoginPage');
      } 
      
    });
  }

It worked. But If user copy and paste the url directly: http://localhost:8100/#/list
the ListPage will show the content first and then redirect to the LoginPage because Ionic storage is Asyn. How should I prevent the ListPage from showing before the redirection in this case? thx again.

5

I guess ionic 4 will give us a better solution.
Can’t wait to use Stencil.js without any other framework also.
Ionic 1.x is pretty mature. I guess we just need to wait a bit longer for ionic 2+ to reach the same maturity level.

6

I tried another approach. It worked but I am not sure if this is the correct way since I am new to the reactive programming:
app.component.ts

initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
      this.storage.ready().then(() => this.storage.get('token'))
      .then(token => {
       
        if(token !== null) {
          this.user.authNotifier.next(true);
        }
        
      });
  
    this.user.authenticationNotifier().subscribe((authed) => {
      if (authed) {
        this.rootPage = 'ListPage';
      } else {
        this.rootPage = 'LoginPage';
      }
    });
    

    });
  }

User.ts

  token;
  authNotifier: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
  authenticationNotifier(): Observable<boolean> {
    return this.authNotifier;
  }
  
  constructor(public api: Api, public storage: Storage) { 
    this.authNotifier.next(false);
  }

  checkToken() {
    if (this.token === '' || this.token === null || this.token === undefined) {
      this.authNotifier.next(false);
      return false;
    }
  }

doLogin (userData){
      let seq = this.api.post('Login', userData).share();

    seq.subscribe((res: any) => {
      if (res.status == 'OK') {
        this.storage.ready().then(() => this.storage.set('token', res.response.accessToken));
        this.token = res.response.accessToken;
        this.authNotifier.next(true);
        this._loggedIn(res.response);
      } else {
        Observable.throw(res);
      }
    }, err => {
      console.error('ERROR', err);
    });

    return seq;
}

List.component.ts

ionViewCanEnter () {
    return this.user.checkToken();
  }
7

Haven’t seen of there’s any work as Angular route guards. That should be the way.
On an app we worked on we made a service that checked permissions based on a menu code, with roles and codes recovered after login. Before entering any route we called the allowRouteAccess method. IonBeforeEnter just didn’t work as expected.

8

Thanks a lot for sharing your experience jsanta.
You solution works the best if you don’t use lazyloading.
With lazyloading and deeplinks which are default since ionic 3+, how do you handle the deeplinks then? For security reason, I think you still need to detect unauthorized route change either using a global listener(like how ui router does it) or handle it using component life cycle management if ionic support it.

9

Have the list data delivered by Observables, and put a gate on the Observables so they only deliver if your auth state (or whatever you need) is correct.

10

I will try that.Many thanks Aaron.

11

In fact, we applied this strategy using lazy loading (on Ionic-1, but using the OC lazy load library).
The best approach should be very similar in any version, just depending on programming logic other than specific version coding. That would lead to an abstract solution you can apply to any code.

12

What about subclassing / extending the default NavController and injecting that everywhere, override the push() method to implement the guard logic ?