如何在react-native-webview中保持django web会话处于活动状态？

Question

基于此答案我尝试在IOS中保留我的会话，即使我随请求传回cookie，当我退出并重新打开应用程序时我仍然会回来，与上面链接的区别是我正在使用 django 及其会话

export default class App extends Component {
    constructor(props) {
        super(props);
        this.currentUrl = '';
        this.myWebView = React.createRef();
        this.state = {
            isReady: false,
            cookiesString: '',
            userAgent: '',
        };
    }

    UNSAFE_componentWillMount() {
        // CookieManager.clearAll();
        this.provideMeSavedCookies()
            .then(async (savedCookies) => {
                let cookiesString = this.jsonCookiesToCookieString(savedCookies);
                const sessionid = await AsyncStorage.getItem('sessionid');
                if (sessionid) {
                    cookiesString += `sessionid=${sessionid};`;
                }
                DeviceInfo.getUserAgent().then((userAgent) => {
                    this.setState({userAgent: userAgent, cookiesString, isReady: true});
                });
            })
            .catch((e) => {
                this.setState({isReady: true});
            });
    }

    onLoadEnd = () => {
        let successUrl = `${domain}`;
        if (this.currentUrl === successUrl) {
            CookieManager.getAll().then((res) => {
                console.log('RES');
                console.log(res)
                AsyncStorage.setItem('savedCookies', JSON.stringify(res));
                if (res.sessionid) {
                    AsyncStorage.setItem('sessionid', res.sessionid.value);
                }
            });
        }
    };

    jsonCookiesToCookieString = (json) => {
        let cookiesString = '';
        for (let [key, value] of Object.entries(json)) {
            cookiesString += `${key}=${value.value}; `;
        }
        return cookiesString;
    };

    onNavigationStateChange = (navState) => {
        this.currentUrl = navState.url;
    };


    provideMeSavedCookies = async () => {
        try {
            let value = await AsyncStorage.getItem('savedCookies');
            if (value !== null) {
                return Promise.resolve(JSON.parse(value));
            }
        } catch (error) {
            return {}
        }
    };

    render() {
        const {userAgent, cookiesString, isReady} = this.state;
        return (
            <SafeAreaView style={{ flex:1 }}>
                {isReady && <WebView
                    ref={this.myWebView}
                    source={{
                        uri: `${domain}`,
                        headers: {
                            'Cookie': cookiesString,
                            'Connection': 'keep-alive',
                            'Cache-Control': 'max-age=0',
                            'User-Agent': userAgent
                        },
                    }}
                    useWebView2={true} # this is just to test
                    cacheEnabled={false}
                    incognito={false}
                    scalesPageToFit
                    useWebKit
                    onLoadEnd={this.onLoadEnd}
                    onNavigationStateChange={this.onNavigationStateChange}
                    sharedCookiesEnabled
                    javaScriptEnabled={true}
                    domStorageEnabled={true}

                />}
                {!isReady &&
                    <View><Text>Loading...</Text></View>
                }
            </SafeAreaView>
        );
    }
}

这是我的 cookiesString

csrftoken=6dkeV4w5qcUbAnM1IvUoIt7EhZVScsSbj4bkWHJLRXQWyk3zy40eSREqaeE0mpaT; sessionid=x2x65ksaz9k9izw756vnie4dmlgdx1zk; sessionid=x2x65ksaz9k9izw756vnie4dmlgdx1zk;

我在PC浏览器中的请求和响应标头

Answer 1

您可以通过在

csrftoken 

中使用

injectedJavaScript

来 Django

WebView 

并将 CSRF 令牌分配给 WebView

 const csrfToken = "your-csrf-token-value";
 const jsCode = `
 var csrfToken = "${csrfToken}";
 document.querySelector('meta[name=csrf-token]').setAttribute('content', csrfToken);`


<WebView
   source={{ uri: 'your-django-app-url' }}
   injectedJavaScript={jsCode}
   sharedCookiesEnabled={true}
/>

您可能需要将此

meta

标签添加到您的 Django 应用程序

<meta name="csrf-token" content="{{ csrf_token }}">

然后对于 Javascript 表单提交添加此以使用

csrf

 const jsCode = `
 var csrfToken = document.querySelector('meta[name=csrf token]').getAttribute('content');
 // Attach csrfToken to your AJAX requests if you use it`;