1

Problem Defination:

I need to inject the authorization header to session storage of WebView, so that the server authenticates the user and redirects to the dashboard. If there is any delay in injection the WebView loads and redirects user to server's login page as it couldn't find the authorization header in the session storage.

What I tried:

  1. onLoadStrat of WebView, I've injected the data using this.webview.injectJavaScript()

  2. By doing so I'm able to inject the data to session storage but on first load there's a race condition. Injection takes a bit time and the Login screen has shown in place of the dashboard.

Expected Result:

We want to achieve the injection without any delay. Suggest me if there's any other way to get this working the way we want it to.

Waiting to hear from you guys. Your valuable suggestions are highly appreciated.

Thank you.

Gatha
  • 31
  • 3

1 Answers1

0

What you are facing is a direct result of asynchronous nature of React in general. You cannot stop the login screen rendering from happening (in other words, the render() function cannot be stopped). But what you can do is, you can inject the data into sessionStorage and then once it is set, change some variable in the state of the component. This will force the component to re-render but this time you will have the data injected. So here are the steps:

1.) Let it render first (you cannot stop it and stopping it anyways is anti-pattern).

2.) Inject the data as you need it to.

3.) Change the state of the component as soon as step 2 is done.

All of this should happen very fast and should not be visible to the end user, imo.

Devashish
  • 1,260
  • 1
  • 10
  • 21