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

【问题标题】：Role based authentication in React Native app using Firebase使用 Firebase 在 React Native 应用程序中基于角色的身份验证
【发布时间】：2021-04-20 19:39:57
【问题描述】：

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

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

【问题讨论】：

标签： reactjs firebase react-native google-cloud-firestore role-based-access-control

【解决方案1】：

看看这个medium auth flow tutorial，我正在使用它来处理我的移动应用程序中的多个用户角色，它可以完美运行。

您不需要使用 AWS，只需将其替换为您的后端服务器身份验证 api。

要处理多个角色，更改 AppNavigator 的返回值如下：

return (
    <NavigationContainer>
        {userToken ?
            isAdmin
                <AdminModule />
            :   
                <UserModule />      
        :               
            <AuthModule />
        }
    </NavigationContainer>
);

所有这些模块都只是 StackNavigators 或 BottomTabNavigators 或两者的组合，这取决于您。

使用 react 钩子从 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。

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);
    }
})

我为此花了几天时间，希望您能在这个帮助下更快地完成它。

【讨论】：