React-navigation：带权限验证的深度链接实现方案咨询

核心逻辑（对应提供的流程图） #

• 深度链接触发：用户点击链接或系统唤起应用，React Navigation捕获路由请求
• 解析链接参数：提取路由路径、用户身份标识等关键信息
• 用户状态校验：
  • 未登录：跳转登录页，登录成功后重新校验权限
  • 已登录：获取当前用户类型（如普通用户、管理员、VIP）
• 权限匹配校验：
  • 权限匹配：直接进入目标页面
  • 权限不匹配：跳转无权限提示页或首页

具体实现步骤 #

1. 配置深度链接基础路由 #

在导航容器中设置链接前缀与路由映射，确保正确解析跳转请求：

import { NavigationContainer } from '@react-navigation/native';
import { Linking } from 'react-native';

const linking = {
  prefixes: ['yourapp://', 'https://yourapp.com'],
  config: {
    screens: {
      Home: 'home',
      AdminPanel: 'admin',
      VIPExclusive: 'vip',
      NoPermission: 'no-permission',
      Login: 'login',
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking} fallback={<LoadingScreen />}>
      {/* 导航栈/抽屉结构 */}
    </NavigationContainer>
  );
}

2. 全局权限拦截钩子 #

创建自定义钩子，在页面加载前自动校验用户权限：

import { useNavigation, useRoute } from '@react-navigation/native';
import { useEffect } from 'react';
import { getUserInfo, isLoggedIn } from '../utils/auth';

// 页面权限配置表：键为路由名，值为允许访问的用户类型数组
const PAGE_PERMISSIONS = {
  AdminPanel: ['admin'],
  VIPExclusive: ['vip', 'admin'],
  Home: ['user', 'vip', 'admin'],
};

function usePermissionCheck() {
  const navigation = useNavigation();
  const route = useRoute();

  useEffect(() => {
    const checkPermission = async () => {
      const loggedIn = await isLoggedIn();
      // 未登录则跳转登录页，携带原路由参数
      if (!loggedIn) {
        navigation.navigate('Login', { redirectTo: route.name, redirectParams: route.params });
        return;
      }

      const userInfo = await getUserInfo();
      const allowedRoles = PAGE_PERMISSIONS[route.name];
      // 无权限配置的页面默认允许所有已登录用户访问
      if (!allowedRoles || allowedRoles.includes(userInfo.userType)) return;

      // 权限不匹配，跳转无权限页
      navigation.navigate('NoPermission');
    };

    checkPermission();
  }, [navigation, route]);
}

// 在需要校验的页面中使用
function AdminPanel() {
  usePermissionCheck();
  return (/* 页面内容 */);
}

3. 登录后重定向处理 #

登录成功后，根据跳转参数回到目标页面：

function LoginScreen({ route }) {
  const navigation = useNavigation();

  const handleLogin = async (credentials) => {
    const loginSuccess = await api.login(credentials);
    if (loginSuccess) {
      const { redirectTo, redirectParams } = route.params || {};
      if (redirectTo) {
        navigation.navigate(redirectTo, redirectParams);
      } else {
        navigation.navigate('Home');
      }
    }
  };

  return (/* 登录表单 */);
}

4. 异常场景处理 #

• 非法参数：解析链接时校验参数有效性，无效则跳转首页
• 用户身份变更：监听账号切换、退出登录事件，实时触发权限重校验

方案优势 #

• 集中式配置：PAGE_PERMISSIONS统一管理权限，便于维护
• 灵活校验：全局拦截+页面级钩子，兼顾统一逻辑与个性化需求
• 流畅体验：登录后自动回到目标页面，无断点感

内容的提问来源于stack exchange，提问作者changey