使用Firebase在React Native应用中基于角色的身份验证 [英] Role based authentication in React Native app using Firebase

问题描述

当前在我的本机应用程序中使用Firebase.我必须管理管理员和用户两个角色.我无法管理Firebase身份验证中的角色，这是我仅在其中注册用户的代码.任何人都可以帮助您管理角色.谢谢

Currently using Firebase in my react native app. I have to manage two roles for admin and user. I am not able to manage roles in firebase authentication here is the code in which i am simply registering a user. Any one please help regarding managing roles. Thanks

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

推荐答案

看看这个

Take a look at this medium auth flow tutorial, I'm using this to handle multiple user roles in my mobile app and it works flawlessly.

您无需使用AWS，只需将其替换为后端服务器auth api.

You don't need to use AWS, just replace it with you backend server auth api.

要处理多个角色，请像这样更改AppNavigator的返回值:

To handle multiple roles, alter AppNavigator return like this:

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

所有这些模块仅仅是StackNavigators或BottomTabNavigators或两者结合使用，由您决定.

All of these Modules are just StackNavigators, or BottomTabNavigators or both combined, it's up to you.

使用react钩子从auth获取令牌或管理员/用户:

Use react hooks to get token or admin/user from auth:

const { userToken, isAdmin } = useAuthState();  

更改reduce来处理多个角色:

Alter the reducer to handle multiple roles:

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以处理多个角色(这些是默认值):

Also alter the AuthProvider to handle multiple roles (these are default values):

const [state, dispatch] = React.useReducer(AuthReducer, {
    isLoading: true,
    isSignout: false,
    userToken: null,
    isAdmin: false,
  });

成功登录后，根据角色分派所需的类型:

After successful login dispatch desired type according to role:

dispatch({ type: 'SIGN_IN_ADMIN', token: global.token });

之所以可行，是因为您需要将所有应用程序包装在AuthProvider中，如下所示:

The reason this works, is you need to wrap all your application in the AuthProvider like this:

<AuthProvider>
    <AppNavigator />
</AuthProvider>

然后，每次您分发()某些东西时，应用程序都会根据您分发的角色重新呈现UI.

Then everytime you dispatch() something, the app re-renders UI according to the role you dispatched.

登录/注册调用应返回admin/user角色，因此您可以呈现用户/admin UI.它应该看起来像这样:

The login/register call should return admin/user role, so you can render user/admin UI. It should look something like this:

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

我花了几天时间在此上，希望您能在此帮助下更快地完成工作.

I spent days on this, hope you will get it done faster with this help.

这篇关于使用Firebase在React Native应用中基于角色的身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！