React-navigation：与身份验证的深度链接

Question

我正在使用 react-native 和 react-navigation 库构建一个移动应用程序，用于管理我的应用程序中的导航。现在，我的应用看起来像这样：

App [SwitchNavigator]
    Splash [Screen]
    Auth [Screen]
    MainApp [StackNavigator]
        Home [Screen]            (/home)
        Profile [Screen]         (/profile)
        Notifications [Screen]   (/notifications)

我已经为屏幕Home、Profile 和Notifications 集成了深度链接与上述模式，并且它按预期工作。我面临的问题是如何在使用深层链接时管理用户的身份验证。现在，每当我打开深层链接（例如myapp://profile）时，无论我是否经过身份验证，应用程序都会将我带到屏幕上。我想要它做的是在AsyncStorage 之前检查是否有userToken，如果没有或它不再有效，那么只需在Auth 屏幕上重定向。

我以与here 描述的几乎完全相同的方式设置身份验证流程。因此，当我的应用程序启动 Splash 屏幕时，会检查用户的手机是否有有效令牌，并在 Auth 屏幕或 Home 屏幕上发送给他。

我现在想出的唯一解决方案是将每个深层链接指向Splash，验证我的用户，然后解析链接以导航到正确的屏幕。 例如，当用户打开myapp://profile 时，我在Splash 上打开应用程序，验证令牌，然后解析url (/profile)，最后重定向到Auth 或Profile。

这是这样做的好方法，还是 react-navigation 提供了更好的方法来做到这一点？他们网站上的Deep linking 页面有点亮。

感谢您的帮助！

Answer 1

我的设置与您的类似。我按照Authentication flows · React Navigation 和SplashScreen - Expo Documentation 设置了我的身份验证流程，所以我有点失望的是，让深层链接通过它也是一个挑战。我可以通过自定义我的主开关导航器来完成这项工作，该方法类似于您所说的您现在拥有的解决方案。我只是想分享我的解决方案，所以有一个具体的例子来说明如何开始工作。我的主开关导航器是这样设置的（我也在使用 TypeScript，所以如果不熟悉类型定义，请忽略它们）：

const MainNavigation = createSwitchNavigator(
  {
    SplashLoading,
    Onboarding: OnboardingStackNavigator,
    App: AppNavigator,
  },
  {
    initialRouteName: 'SplashLoading',
  }
);

const previousGetActionForPathAndParams =
  MainNavigation.router.getActionForPathAndParams;

Object.assign(MainNavigation.router, {
  getActionForPathAndParams(path: string, params: any) {
    const isAuthLink = path.startsWith('auth-link');

    if (isAuthLink) {
      return NavigationActions.navigate({
        routeName: 'SplashLoading',
        params: { ...params, path },
      });
    }

    return previousGetActionForPathAndParams(path, params);
  },
});

export const AppNavigation = createAppContainer(MainNavigation);

您要通过身份验证流程路由的任何深层链接都需要以 auth-link 开头，或者您选择的任何前缀。这是SplashLoading 的样子：

export const SplashLoading = (props: NavigationScreenProps) => {
  const [isSplashReady, setIsSplashReady] = useState(false);

  const _cacheFonts: CacheFontsFn = fonts =>
    fonts.map(font => Font.loadAsync(font as any));

  const _cacheSplashAssets = () => {
    const splashIcon = require(splashIconPath);
    return Asset.fromModule(splashIcon).downloadAsync();
  };

  const _cacheAppAssets = async () => {
    SplashScreen.hide();
    const fontAssetPromises = _cacheFonts(fontMap);
    return Promise.all([...fontAssetPromises]);
  };

  const _initializeApp = async () => {
    // Cache assets
    await _cacheAppAssets();

    // Check if user is logged in
    const sessionId = await SecureStore.getItemAsync(CCSID_KEY);

      // Get deep linking params
    const params = props.navigation.state.params;
    let action: any;

    if (params && params.routeName) {
      const { routeName, ...routeParams } = params;
      action = NavigationActions.navigate({ routeName, params: routeParams });
    }

    // If not logged in, navigate to Auth flow
    if (!sessionId) {
      return props.navigation.dispatch(
        NavigationActions.navigate({
          routeName: 'Onboarding',
          action,
        })
      );
    }

    // Otherwise, navigate to App flow
    return props.navigation.navigate(
      NavigationActions.navigate({
        routeName: 'App',
        action,
      })
    );
  };

  if (!isSplashReady) {
    return (
      <AppLoading
        startAsync={_cacheSplashAssets}
        onFinish={() => setIsSplashReady(true)}
        onError={console.warn}
        autoHideSplash={false}
      />
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <Image source={require(splashIconPath)} onLoad={_initializeApp} />
    </View>
  );
};

我使用routeName 查询参数创建深层链接，这是执行身份验证检查后要导航到的屏幕的名称（您显然可以添加您需要的任何其他查询参数）。由于我的SplashLoading 屏幕处理加载所有字体/资产以及身份验证检查，因此我需要每个深层链接来路由它。我遇到的问题是，我会手动退出应用程序的多任务处理，点击深层链接 url，然后应用程序崩溃，因为深层链接绕过了 SplashLoading，所以没有加载字体。

上面的方法声明了一个action 变量，如果没有设置它将什么都不做。如果routeName 查询参数不是undefined，我设置action 变量。这使得一旦 Switch 路由器根据 auth（Onboarding 或 App）决定采用哪条路径，该路由就会在退出 auth/splash 加载流程后获取子操作并导航到 routeName。

这是我创建的一个示例链接，它在这个系统上运行良好： exp://192.168.1.7:19000/--/auth-link?routeName=ForgotPasswordChange&cacheKey=a9b3ra50-5fc2-4er7-b4e7-0d6c0925c536

希望库的作者将来能将其作为本机支持的功能，这样黑客就没有必要了。我也很想看看你的想法！

Answer 2

我最终使用自定义 URI 来拦截深度链接启动，然后将这些参数传递给预期的路由。我的加载屏幕处理身份验证检查。

const previousGetActionForPathAndParams = AppContainer.router.getActionForPathAndParams

Object.assign(AppContainer.router, {
  getActionForPathAndParams (path, params) {
    if (path === 'auth' && params.routeName && params.userId ) {
      // returns a profile navigate action for myApp://auth?routeName=chat&userId=1234
      return NavigationActions.navigate({
        routeName: 'Loading',
          params: { ...params, path },
      })
    }
    return previousGetActionForPathAndParams(path, params)
  },
})

https://reactnavigation.org/docs/en/routers.html#handling-custom-uris

然后，在我的加载路线中，我像往常一样解析参数，然后路由到预期的位置，再次传递它们。

const userId = this.props.navigation.getParam('userId')

https://reactnavigation.org/docs/en/params.html

Answer 3

在我这边，我实现了这一点，而无需手动解析路径以提取路径和参数。 步骤如下：

• 获取导航操作返回：getActionForPathAndParams
• 将导航操作作为参数传递给身份验证视图
• 然后，当身份验证成功或身份验证已经正常时，我会调度导航操作以继续预期的路线

const previousGetActionForPathAndParams = AppContainer.router.getActionForPathAndParams

Object.assign(AppContainer.router, {
  getActionForPathAndParams(path: string, params: NavigationParams) {
    const navigationAction = previousGetActionForPathAndParams(path, params)
    return NavigationActions.navigate({
      routeName: 'Authentication',
      params: { navigationAction }
    })
  }
})

然后在身份验证视图中：

const navigationAction = this.navigation.getParam('navigationAction')
if (navigationAction)
  this.props.navigation.dispatch(navigationAction)

Answer 4

我找到了一种更简单的方法，我将链接保存在一个单独的文件中，并将其导入主App.js

linking.js

 const config = {
   screens: {
      Home:'home',
      Profile:'profile,
     },
  };
    
 const linking = {
  prefixes: ['demo://app'],
  config,
};
     
 export default linking;

App.js

& 在登录期间，我将令牌保存在异步存储中，当用户注销时，令牌被删除。根据令牌的可用性，我将链接附加到导航并使用状态将其分离，当它分离时它回退到 SplashScreen。

确保设置initialRouteName="SplashScreen"

import React, {useState, useEffect} from 'react';
import {Linking} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import linking from './utils/linking';
import {Home, Profile, SplashScreen} from './components';

const Stack = createStackNavigator();

// This will be used to retrieve the AsyncStorage String value
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? value : '';
  } catch (error) {
    console.error(`Error Caught while getting async storage data: ${error}`);
  }
};

function _handleOpenUrl(event) {
  console.log('handleOpenUrl', event.url);
}

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // Checks if the user is logged in or not, if not logged in then
    // the app prevents the access to deep link & falls back to splash screen.
    getData('studentToken').then((token) => {
      if (token === '' || token === undefined) setIsLoggedIn(false);
      else setIsLoggedIn(true);
    });

    Linking.addEventListener('url', _handleOpenUrl);
    return () => {
      Linking.removeEventListener('url', _handleOpenUrl);
    };
  }, []);

  return (
    //linking is enabled only if the user is logged in
    <NavigationContainer linking={isLoggedIn && linking}>
      <Stack.Navigator
        initialRouteName="SplashScreen"
        screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
        <Stack.Screen
          name="SplashScreen"
          component={SplashScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Home"
          component={Home}
          options={{headerShown: false, gestureEnabled: false}}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{headerShown: false, gestureEnabled: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

当登录用户打开通知中的深层链接时，它会将他带到相应的深层链接屏幕，如果他未登录，则会从启动屏幕打开。