首页 > 解决方案 > 使用 Firebase 在 React Native 应用程序中进行基于角色的身份验证

问题描述

目前在我的反应原生应用程序中使用 Firebase。我必须为管理员和用户管理两个角色。我无法在 firebase 身份验证中管理角色,这是我只是在其中注册用户的代码。请任何人帮助管理角色。谢谢

 register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },

标签: reactjsfirebasereact-nativegoogle-cloud-firestorerole-based-access-control

解决方案


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

您不需要使用 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);
    }
})

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


推荐阅读