保护您的 React Native App：防止未授权用户访问屏幕

Source: Dev.to

开发移动应用时，通常需要管理用户身份验证，并确保应用的敏感部分仅对已登录用户可见。在本文中，我们将深入探讨如何在 React Native 应用中保护屏幕，防止未授权访问，正如视频 How to Protect Your Screen in React Native 所示。

我的应用 Dowell – Do Everything Well 是一个习惯追踪器。一个关键需求是确保未登录的用户无法访问应用受保护部分的核心功能。

核心概念：授权管理

基本思路是管理用户会话和认证状态。如果用户未认证，应将其重定向到登录页面；如果已登录，则可以访问主应用。

第一步：根布局和 Session Provider

主要逻辑位于布局文件中。在这里准备你的 provider。我的设置中使用 QueryClientProvider 进行数据获取，但屏幕保护最关键的部分是创建 Session Provider。

第二步：用于状态管理的 Session Provider

SessionProvider 充当状态管理系统，跟踪用户是否已认证。它通常持有一个状态变量，例如 isAuthenticated。当用户登录时，该值会变为 true。

第三步：在根导航器中实现受保护的路由

在 RootNavigator 中使用 useSession 钩子获取 isAuthenticated。这就是屏幕保护发生的地方。

• 已认证 (isAuthenticated === true) – 渲染主应用屏幕。视频中我将内部屏幕（例如 app 文件夹中的屏幕）包裹在一个堆栈导航器中。
• 未认证 (isAuthenticated === false) – 重定向到登录页。

关键在于条件渲染导航堆栈。你可以用一个 “受保护的堆栈” 包裹屏幕，并检查 isAuthenticated：

// Example (TypeScript/React Native)
import { useSession } from '@/hooks/useSession';
import { createStackNavigator } from '@react-navigation/stack';
import SignInScreen from '@/screens/SignInScreen';
import HomeScreen from '@/screens/HomeScreen';

const Stack = createStackNavigator();

export default function RootNavigator() {
  const { isAuthenticated } = useSession();

  return (
    <>
      {isAuthenticated ? (
        // Protected screens
        <>
          {/* other protected screens */}
        </>
      ) : (
        // Public screens
        <>
          <Stack.Screen name="SignIn" component={SignInScreen} />
        </>
      )}
    </>
  );
}

工作流演示

当未授权用户打开应用时，会立即被重定向到登录页。登录成功后，用户会进入主应用屏幕。应用还会在启动时检查认证状态；如果用户已认证，则直接进入主屏幕，否则返回登录页。

结论

实现屏幕保护对于构建安全且用户友好的 React Native 应用至关重要。通过利用 SessionProvider 并根据认证状态条件渲染导航堆栈，你可以确保只有授权用户才能访问应用的受保护部分。这种简单而强大的逻辑有助于维护移动应用的完整性和安全性。

你可以在此处查看该应用：DOWELL