Determining if app is entered via Deep Linking in root component

Ionic Framework ionic-v3
1

I’m trying to get Deep Linking working in an app that requires authentication. The root component is conditionally setting the rootPage by checking with an API provider:

this.presentLoading();
		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.
			StatusBar.styleDefault();
			this.api.sessionCheck().then((hasValidSession) => {
				if (hasValidSession) {
					this.rootPage = 'home';
					this.hasValidSession = true;
				} else {
					this.rootPage = 'login';
					this.hasValidSession = false;
				}

				this.loader.dismiss();
			});

The problem I’m having is that in trying to implement Deep Linking the root page is always getting set to ‘home’ due to the session check. How can I access the deep link requested from my app component, or is there another/better way to go about this.

PS - used this super handy article to get Deep Linking working, for those who are also interested: http://masteringionic.com/blog/2017-04-14-lazy-loading-and-deep-linking-with-ionic-3/?s=2017-04-14-lazy-loading-and-deep-linking-with-ionic-3/

Thanks,
Brian

2

I’m facing the exact same issue but with the added bonus that the deep linked component is initialized before the root component.

3

I may have found a solution by accesing the location.hash property.
Using your example:

// class BlahBlah {
// default values in case of failed authentication
rootPage = 'Login';
hasValidSession = false;
// ...

// constructor(){

 let hash = location.hash;
  // capitalizes the first letter of the page name
  let deepLink = hash.charAt(2).toUpperCase() + hash.slice(3);

  this.presentLoading();
  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.
    StatusBar.styleDefault();
    this.api.sessionCheck().then((hasValidSession) => {
      if (hasValidSession) {
      
        // if the app loaded from root, "deepLink" will be undefined 
        // and user will be taken to "Home"
        this.rootPage = deepLink || 'Home';

        this.hasValidSession = true;
      } // no need for an "else" since the defaults are used

      this.loader.dismiss();
    });
  });

// }

I hope this helps although it’s kind of hackish. Authentication is still a huge headache in Ionic 2, but hopefully the Ionic team addresses it.

4

Session-based authentication is a huge headache in general. Can you move to something like JWT?

5

I’m not actually using sessions, I was just modifying @bholub1’s example to use location.hash as a cheap solution for broken deep links.

6

How did you resolve that? When I navigate to a URL directly the page component seems to load before the main app component/services have been set up, so if I type in directly app.com/tasks rather than navigate to it, all the auth/pre-config isn’t ready in time to load

7

I am having the same logic in my codebase.How did u solve this issue?

8

I have the exact same problem, app.component.ts sets my session but If I load a lazyloaded page using /thepage thepage will be loaded first even before the app.component.ts and thepage calls API services resulting in a 401, help anyone?