Question

我想在加载Web应用之前在Web视图中注入访问令牌。基本上，Web应用程序将从浏览器存储中读取访问令牌，并使用它来调用安全API。

申请流程如下：

用户登录到移动应用并获取访问令牌
然后应在开始加载访问令牌之前将其设置为Webview的会话存储属性
该Web应用从存储区读取访问令牌并调用API。

我尝试过的事情：

onLoadStart-可以运行很多次，但视图加载和注入之间仍然存在竞争状况
injectJavaScript：与onLoadStart一起使用
injectedJavaScript：视图开始加载后，由于注入了javascript而无法工作

代码：

// Inject Access Token
_injectAccessToken = () => {
  const script = `window.sessionStorage.setItem("access_token", "token")`;
  this.webview.injectJavaScript(script);
};


// Render
<WebView
  ref={ref => (this.webview = ref)}
  source={{ uri: `` }}
  onLoadStart={this._injectAccessToken}
  domStorageEnabled={true}
/>;

需要解决的问题：

现在，我想摆脱视图加载和注入之间的竞争状况。我并不一定要使用此解决方案，只要在视图加载之前进行注入，其他任何技巧或解决方案都可以。

任何对其他文章的引用或建议，都将受到赞赏。

Answer 1

我能够解决这个问题并将应用投入生产。

那时，我使用的是 React Native 自带的 WebView。效果不太好，所以不得不切换到新的分离包：https://www.npmjs.com/package/react-native-webview

在 WebView 上使用以下道具：

<WebView
  ref={ref => (this.webview = ref)}
  source={{ uri: "SOME_URL" }}
  onLoadStart={() => this._injectAccessTokenOnLoad(params)}
  startInLoadingState
  useWebKit
  javaScriptEnabled
  domStorageEnabled
/>

在加载方法中注入访问令牌：

_injectAccessTokenOnLoad = (params) => {
  // Assuming that we are passing an object for "params"
  // No need to stringify if you are passing a string or a number
  const value = JSON.stringify(params);

  const script = `
    setTimeout(() => {
      window.sessionStorage.setItem("SOME_KEY", '${value}');
    }, 100);
  `;
  
  this.webview.injectJavaScript(script);
};

Answer 2

使用componentWillMount()方法或constructor()（请参阅React native component lifecycle）为存储增加价值

然后使用本机AsyncStorage来增加存储价值。

import AsyncStorage from '@react-native-community/async-storage';
...
async componentWillMount() {
    await AsyncStorage.setItem('key', 'value');
}

注意：：react-native先前的AsyncStorage API已被弃用，以后将被删除。它是作为separate API (@react-native-community/async-storage)

引入的

如何在视图加载到React Native WebView中之前在WebView本地存储中设置值

2 个答案: