时间戳

首页 > 解决方案 > 反应本机抽屉中的身份验证流程

javascript - 反应本机抽屉中的身份验证流程

问题描述

我是反应原生的新手。我正在做一个实践项目，但我坚持理解身份验证流程的概念。在我的应用程序上，一个是管理员拥有这些屏幕 AddUser、所有数据、allUser、uploadfile，第二个是用户拥有这个屏幕 allData。

但是我如何添加身份验证流程？在打开应用程序时，我想在上面提到管理员和用户之后显示登录。

import { createDrawerNavigator } from 'react-navigation-drawer';
import Constants from 'expo-constants';
import {createAppContainer} from 'react-navigation';
import AllData from '../components/alldata';
import AllUsers from '../components/alluser';
import AddUser from '../components/adduser';
import Login from '../components/login';
import UploadFile from '../components/uploadfile';



const RootNavigation = createDrawerNavigator({
    Login:{screen:Login},
    Add_User:{
        screen: AddUser,
        navigationOptions:{
            drawerLabel: 'Add User',
        }
    },
    Data:{screen: AllData},
    Users:{screen: AllUsers},
    Uploader:{screen: UploadFile}
});


export default createAppContainer(RootNavigation);

那是我的抽屉。

标签： javascriptreact-nativereact-native-navigation

解决方案

看看这个中等身份验证流程教程，我正在使用它来处理我的移动应用程序中的多个用户角色，它可以完美运行。

您不需要使用 AWS，只需将其替换为您的后端服务器身份验证 API。

要处理多个角色，请更改 AppNavigator 返回，如下所示：

return (
    <NavigationContainer>
        {userToken ?
            isAdmin
                <AdminModule />
            :   
                <UserModule />      
        :               
            <AuthModule />
        }
    </NavigationContainer>
);

所有这些模块都只是 StackNavigators 或 BottomTabNavigators 或两者的组合，这取决于您。

使用反应钩子从身份验证中获取令牌或管理员/用户：

const { userToken, isAdmin } = useAuthState();

改变 reducer 来处理多个角色：

case 'SIGN_IN':
  return {
    ...prevState,
    isSignout: false,
    userToken: action.token,
    isAdmin: false,
  };
case 'SIGN_IN_ADMIN':
  return {
    ...prevState,
    isSignout: false,
    userToken: action.token,
    isAdmin: true,
  };

还要更改 AuthProvider 以处理多个角色（这些是默认值）：

const [state, dispatch] = React.useReducer(AuthReducer, {
    isLoading: true,
    isSignout: false,
    userToken: null,
    isAdmin: false,
  });

登录成功后，根据角色分派所需类型：

dispatch({ type: 'SIGN_IN_ADMIN', token: global.token });

这样做的原因是您需要像这样将所有应用程序包装在 AuthProvider 中：

<AuthProvider>
    <AppNavigator />
</AuthProvider>

然后，每次您 dispatch() 时，应用程序都会根据您分派的角色重新呈现 UI。

我花了几天的时间，希望你能在这个帮助下更快地完成它。

推荐阅读