Question

我正在尝试对react-admin实施 aws-amplify 。特别是对于身份验证部分。

不是这样的： react-admin with Amplify NavBar on top

我希望从“ aws-amplify”中获得“ UserName”和“ LogOut”按钮，就像默认视图一样： default-navbar-screenshot

authProvider <code example>：

const App = () => (
  <Admin
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
    <Resource name="users" list={UserList} icon={UserIcon} />
    <Resource
      name="posts"
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      icon={PostIcon}
    />
  </Admin>
);

react-admin有一个我们可以定制的authProvider道具，但是我不知道如何创建连接到aws-amplify的组件。

Answer 1

您需要为authProvider和dataProvider创建提供者，它们将与react-admin兼容。

来自 the official documentation：

什么是 authProvider ？就像 dataProvider 一样， authProvider 是处理身份验证逻辑的对象。它公开了在需要时可进行react-admin调用并返回Promise的方法。最简单的authProvider是：

const authProvider = {
    login: params => Promise.resolve(),
    logout: params => Promise.resolve(),
    checkAuth: params => Promise.resolve(),
};

现在，对于每种方法，我们都需要从aws-amplify映射该方法：

import {Auth} from 'aws-amplify';

const authProvider = {
    login: ({ username, password }) => Auth.signIn(username, password),
    logout: Auth.signOut,
    checkAuth: Auth.currentAuthenticatedUser,
};

Answer 2

react-admin和Amplify都可以充当应用程序的容器/包装器。但是，尝试将二者合并在一起并不像同时使用这两个组件那样简单（不幸的是）。但是，正如@Alexander所述，您可以使用Amplify方法创建自定义authProvider。如果您需要更多的即插即用功能，那么react-admin-amplify npm软件包将为您做很多事情。它看起来很新，但是正在取得积极进展，似乎已经克服了您看到的许多初始障碍。

您如何将AWS放大身份验证与react-admin集成在一起？

2 个答案: