[英]authentication flow in react native drawer
我是反应原生的新手。 我正在做一个实践项目,但我坚持理解身份验证流程的概念。 在我的应用程序上,一个是管理员拥有这些屏幕 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);
那是我的抽屉。
看看这个中等身份验证流程教程,我正在使用它来处理我的移动应用程序中的多个用户角色,它可以完美运行。
您不需要使用 AWS,只需将其替换为您的后端服务器 auth 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。
我花了几天的时间,希望你能在这个帮助下更快地完成它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.