Docs 菜单
Docs 主页
/
MongoDB Atlas
/
Atlas Device SDKs
/
React Native SDK
/
API 参考

UserProvider (@realm/react)

在此页面上

  • Props 对象
  • 配置 UserProvider
  • UserProvider 钩子
  • useUser()
类型签名
UserProvider(props): null | ReactElement<any, any>

嵌套在 UserProvider内的组件可以访问登录的用户对象并使用UserProvider钩子。

Props 对象

  • fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined 没有授权用户时要呈现的回退组件。 这可用于呈现登录屏幕或以其他方式处理身份验证。

配置 UserProvider

AppProvider包装的组件可以访问useApp和useAuth钩子。仅当AppProvider成功连接到 App Services 后端时，这些组件才会呈现。

UserProvider包装的组件可以使用useUser钩子访问经过身份验证的用户。 仅当您的应用具有经过身份验证的用户时，才会呈现这些组件。

要配置用户身份验证，请执行以下操作：

  1. 将需要访问 App Services 的所有组件封装在 AppProvider 中。

  2. 在 AppProvider 内部，用 UserProvider 来封装您希望经过身份验证的用户有权访问的所有组件。

  3. 在 UserProvider 中，包含一个 fallback 属性（附带用于用户登录的组件）。如果没有经过身份验证的用户，该应用则会显示此组件。

import React from 'react';
import {AppProvider, UserProvider} from '@realm/react';
// Fallback log in component that's defined in another file.
import {LogIn} from './Login';
export const LoginExample = () => {
  return (
    <ScrollView>
      <AppProvider id={APP_ID}>
        {/* If there is no authenticated user, mount the
         `fallback` component. When user successfully
          authenticates, the app unmounts the `fallback`
          component (in this case, the `LogIn` component). */}
        <UserProvider fallback={LogIn}>
          {/* Components inside UserProvider have access
            to the user. These components only mount if
            there's an authenticated user. */}
          <UserInformation />
        </UserProvider>
      </AppProvider>
    </ScrollView>
  );
};

UserProvider 钩子

useUser()

类型签名
useUser<FunctionsFactoryType, CustomDataType, UserProfileDataType>(): Realm.User<FunctionsFactoryType, CustomDataType, UserProfileDataType>

useUser()钩子向已登录用户提供访问权限。 例如，您可以使用useUser()注销当前用户。

当用户对象发生更改时，该钩子将重新呈现其父组件。 例如，如果调用user.refreshCustomData来获取更新的自定义用户数据，则useUser()父组件将重新呈现。

function UserInformation() {
  const user = useUser();
  const {logOut} = useAuth();
  const performLogout = () => {
    logOut();
  };
  // Add UI for logging out...
}

返回：

  • Realm.User 当前经过身份验证的 Realm 用户的实例。

后退

AppProvider (@realm/react)