使用 Firebase 在 React Native 应用程序中进行基于角色的身份验证

IT技术 reactjs firebase react-native google-cloud-firestore role-based-access-control
2021-05-17 08:40:05

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

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

看看这个中等身份验证流程教程,我正在使用它来处理我的移动应用程序中的多个用户角色,并且它完美地工作。

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

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