Determining if app is entered via Deep Linking in root component

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

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

1 Like

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.

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

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.

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

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

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?