使用React Navigation进行深度链接以保护屏幕

xzabzqsa  于 6个月前  发布在  React
关注(0)|答案(2)|浏览(46)

我正在使用Expo Managed Workflow构建一个应用程序,利用React Navigation,EAS Build等。
React Navigation有一个linking配置,可以用来将屏幕连接到深度链接路径。我面临的问题是,当用户已经打开应用程序时,深度链接正在工作,但当深度链接从关闭状态打开应用程序时,深度链接则无法工作。
我最好的猜测是,这是因为深层链接试图在我的身份验证逻辑暴露“受保护的屏幕”之前导航。

!isAuth ? <LogIn /> : <ProtectedScreens />

字符串
我似乎找不到任何好的文档或例子来处理这个问题并检测深层链接,但要等到React Navigation渲染了<ProtectedScreens />之后。
如果你能帮忙的话,我将不胜感激。

vkc1a9a2

vkc1a9a21#

最近我自己也想弄清楚这一点,react-navigation的文档在这方面真的很差。
问题是,你可能会呈现一个<NavigationContainer>,而不管用户是否经过身份验证,并根据auth状态更改导航容器的上下文。解决这个问题的一种方法是使用两个<NavigationContainer>。即:

...
const isAuth = useAuth();

return isAuth ? (
  <NavigationContainer key={1}>
    <LogIn />
  </NavigationContainer>
) : (
  <NavigationContainer key={2} linking={yourLinkingConfig}>
    <ProtectedScreens />
  </NavigationContainer>
);

...

字符串
我可以在我这边确认上述工作。

voase2hg

voase2hg2#

我最终解决了这个问题,从世博会购买新的范式和利用世博会路由器。现在也世博会路由器V2。
这从React Navigation所需的样板中抽象了一点,但绝对简化了处理场景。
总的来说,您可以创建一个自定义钩子来管理Expo Router状态,并通过利用Expo的useSegments钩子来访问应用的不同部分。

type AuthContext = {
  user: User | null;
};

type AuthProviderProps = { children: React.ReactNode; user: User | null };

const AuthContext = createContext<AuthContext | null>(null);

export const AuthProvider = ({ children, user }: AuthProviderProps) => {
  useProtectedRoute(user);
  return <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>;
};

function useProtectedRoute(user: User | null) {
  const segments = useSegments();
  const router = useRouter();

  useEffect(() => {
    const inAuthGroup = segments[0] === '(auth)';
    const isSignedIn = segments[0] === '(main)';

    if(!user && isSignedIn) {
      return router.replace('/phoneAuth');
    } else if (inAuthGroup && user) {
      return router.replace('/tabs');
    } 
  }, [user?.id, segments]);
}

字符串

相关问题