看看这个中等身份验证流程教程,我正在使用它来处理我的移动应用程序中的多个用户角色,并且它完美地工作。
您不需要使用 AWS,只需将其替换为您的后端服务器 auth api。
要处理多个角色,请像这样改变 AppNavigator 返回:
return (
<NavigationContainer>
{userToken ?
isAdmin
<AdminModule />
:
<UserModule />
:
<AuthModule />
}
</NavigationContainer>
);
所有这些module都只是 StackNavigators、BottomTabNavigators 或两者的结合,这取决于您。
使用 react hooks 从 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。
login/register 调用应返回 admin/user 角色,以便您可以呈现用户/管理员 UI。它应该是这样的:
return Api.login(username, password)
.then(response => {
if (response.role == 'user') {
dispatch('SIGN_IN', token: response.token);
} else if (response.role == 'admin') {
dispatch('SIGN_IN_ADMIN', token: response.token);
}
})
我花了几天的时间在这上面,希望你能在这个帮助下更快地完成它。