reactjs - 使用 Firebase 在 React Native 应用程序中进行基于角色的身份验证
问题描述
目前在我的反应原生应用程序中使用 Firebase。我必须为管理员和用户管理两个角色。我无法在 firebase 身份验证中管理角色,这是我只是在其中注册用户的代码。请任何人帮助管理角色。谢谢
register: async (email, password) => {
try {
await auth().createUserWithEmailAndPassword(email, password);
} catch (e) {
console.log(e);
}
},
解决方案
看看这个中等身份验证流程教程,我正在使用它来处理我的移动应用程序中的多个用户角色,它可以完美运行。
您不需要使用 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。
login/register 调用应返回 admin/user 角色,以便您可以呈现用户/admin 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);
}
})
我花了几天的时间,希望你能在这个帮助下更快地完成它。
推荐阅读
- linux - 有没有办法在不使用期望或生成的情况下在 shell 脚本中执行 ssh 时自动回答用户提示?
- html - svg线条对底部边框的奇怪效果
- python - 将无 DB 字段模型添加到 django 序列化 JSON
- winforms - 通过 C# 类库中的 Web 套接字连接打开 winforms FolderBrowserDialog
- java - 如何在独立 JBoss 中配置自定义日志记录
- php - 添加 js 代码后出现 php 语法错误
- c++ - 使用 mingw730 32 位在 Qt 5.12 项目的发布版本中偏移到代码位置
- apache - 对于使用 modperl 的站点,使用 Apache RedirectPermanent 将 HTTP 重定向到 HTTPS
- python - python类变量注解
- python - 想要从搜索结果和下一页中获取 url