Expo应用与react-native-webview同步登出问题及解决方案

我需要实现Expo应用端和React Native WebView的同步登出——当前点击应用登出按钮仅处理了应用端的认证逻辑，但WebView加载的店铺页面仍处于登录状态。下面是我尝试过的方案及最终解决方法：

尝试的方案 #

方案一：跳转至专门的登出WebView页面 #

通过导航到加载Shopify登出URI的页面来处理WebView端登出：

// 导航配置
<Stack.Navigator>
 <Stack.Screen
   name="AccountDetails"
   component={AccountDetailsScreen}
  />

 <Stack.Screen
  name="ShopWebview"
  component={ShopWebview}
 />

  <Stack.Screen
    name="LogOut"
    component={LogOutWebView}
    />
</Stack.Navigator>

// AccountDetails组件中的登出处理
const handleLogOut = () => navigation.navigate('LogOut');

// 登出WebView组件
export const LogOutWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://www.quarantotto.co.jp/account/logout' }}
    />
  );
};

问题：该方案在Android上有效，但iOS端无法生效。

方案二：开启WebView的无痕模式 #

将WebView的incognito属性设为true，避免存储用户会话：

// ShopWebview组件
<WebView
  incognito
  source={{ uri: 'someshop.com/' }}
/>

问题：虽能避免会话留存，但不确定这是否是规范的认证处理方式。

方案三：注入JS结合定时器重定向 #

在LoginWebview中监听导航状态变化，注入JS并通过定时器触发重定向：

const handleNavigationStateChange = (newNavState) => {
  if (webViewRef.current) {
      webViewRef.current.injectJavaScript(scriptFetchCustomer());
  }

  
  if (newNavState.url.includes('logout')) {
    setTimeout(() => {
      const redirectTo = `window.location = "${someshop.com/login}"`;
        webViewRef.current.injectJavaScript(redirectTo);
      }, 500);
    }
  };

问题：该方法有一定效果，但依赖定时器，且Android端不生效。

最终解决方法 #

通过监听WebView的onNavigationStateChange事件，在WebView跳转到/account/logout后，先重置应用端的登录用户状态，再触发WebView重定向到登录页，实现了应用端和WebView的同步登出。

内容的提问来源于stack exchange，提问作者funtkungus