react-native - 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如果有一个有效的 token ，screen 会检查用户的手机，并通过 Auth 发送给他。屏幕或 Home屏幕。

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

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

谢谢您的帮助 !

Answer 1

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

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

应用.js
& 在登录期间，我将 token 保存在异步存储中，当用户注销时， token 被删除。基于 token 的可用性，我将链接附加到导航并使用状态将其分离，当它分离时它回退到 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;

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