使用Expo Router实现路由鉴权时的页面不重定向问题

核心问题定位 #

你当前的(app)/_layout.tsx里的权限判断逻辑完全写反了，这是导致退出后仍能访问受保护路由的主要原因；同时要确保组件能正确监听全局用户状态的变化。

1. 修正受保护路由的判断逻辑 #

你现在的代码是当用户已登录时跳转到登录页，这和“未登录用户禁止访问受保护路由”的需求完全相反。正确逻辑应该是：没有用户（auth.user为null）时重定向到登录页，已登录则渲染内部Tabs。

修正后的(app)/_layout.tsx代码：

import { Redirect, Stack } from 'expo-router';
import { Text } from 'react-native';
// 替换成你实际的Auth hooks导入路径
import { useAuth } from '../path-to-your-auth-provider';

export default function AppLayout() {
  const auth = useAuth();

  if (auth.isLoading) {
    return <Text>加载中...</Text>;
  }

  // 关键修正：未登录时重定向到登录页
  if (!auth.user) {
    return <Redirect href="/login" />;
  }

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

2. 确保组件能响应用户状态变化 #

要确认你是通过正确的Hooks（比如useContext）获取全局auth状态，并且FirebaseAuthProvider在auth.user变化时会触发组件重渲染。示例useAuth实现：

import { useContext } from 'react';
import { AuthContext } from './AuthContext';

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth 必须在 FirebaseAuthProvider 内部使用');
  }
  return context;
};

3. 可选补充：退出登录时手动触发路由跳转 #

如果状态更新后自动重定向仍有问题，可以在退出登录函数里手动添加路由跳转：

import { router } from 'expo-router';

const handleLogout = () => {
  // 执行你的退出逻辑，将auth.user设为null
  setUser(null);
  // 手动跳转到登录页
  router.replace('/login');
};

内容的提问来源于stack exchange，提问作者kingkong.js