injectedJavaScriptBeforeContentLoaded

Column
컴포넌트 생성 전 자바스크립트 삽입
Tags
inject
  • injectedJavaScriptBeforeContentLoaded 를 이용하면 된다.

참고 링크

사용 시나리오 예시

  • 리액트 프론트에서는 로그인하면 dom storage에 엑세스 토큰을 저장한다.
  • 모바일은 웹뷰를 사용하며 로그인 화면은 네이티브로 구현한다.
    • 직접 로그인 api를 요청하고, 리스폰스를 받고 파싱해서 쿠키 설정
⇒ 모바일에서는 쿠키를 제대로 설정했더라도 dom storage에 엑세스 토큰이 저장되어 있지 않으므로 스토리지에서 꺼내쓰는 경우 에러를 띄움.
⇒ 웹뷰 생성 전 자바스크립트 삽입을 통해 직접 dom storage에 엑세스 토큰을 저장하도록 한다.
 

코드 예시

  • 웹뷰 생성 전 dom storage에 accessToken 값을 저장하는 코드 삽입.
import { WebView } from 'react-native-webview'

...

const injectScript = `(()=>{window.localStorage.setItem('accessToken', '${atk}')})()`

return(
	<WebView style={{ flex: 1 }}
	    injectedJavaScriptBeforeContentLoaded={injectScript}
	    sharedCookiesEnabled=true
	    domStorageEnabled=true
	/>
);

...