反应本机抽屉中的身份验证流程答案

【问题标题】：authentication flow in react native drawer反应本机抽屉中的身份验证流程
【发布时间】：2021-04-15 11:46:59
【问题描述】：

我是 React Native 的新手。我正在做一个练习项目，但我坚持理解身份验证流程的概念。在我的应用程序上，一个是管理员拥有这些屏幕 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);

那是我的抽屉。

【问题讨论】：

您标记了“身份验证流程”； “authentication-flows”是一个框架，涵盖了基于 Spring-Security 的 authentication-server 需要的所有流

标签： javascript react-native react-native-navigation

【解决方案1】：

看看这个medium auth flow tutorial，我正在使用它来处理我的移动应用程序中的多个用户角色，它可以完美运行。

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

要处理多个角色，更改 AppNavigator 的返回值如下：

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

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

使用 react 钩子从 auth 获取令牌或管理员/用户：

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。

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

【讨论】：