如何在 react-admin 上实现忘记密码页面答案

【问题标题】：How to implement forgot password page on react-admin如何在 react-admin 上实现忘记密码页面
【发布时间】：2019-06-16 15:08:54
【问题描述】：

我在react-admin 上实现了一个仪表板。认证过程是在this tutorial之后完成的。

现在我需要实现一个忘记密码的屏幕，但问题是这个屏幕需要无需登录即可访问...

我想到了两种可能的实现方式：

理想情况下，我想配置 react-admin 以允许对特定路由进行未经身份验证的访问。不确定如何执行此操作，或者是否有可能...我发现 this Github issue 提到这是一种增强功能，但它没有解释如何解决这个问题。
在 react 中单独实现此屏幕，并分别处理到此页面的路由。也不知道如何在框架上执行此操作...

有人可以解释如何在框架上实现这两个选项吗？

提前致谢，

【问题讨论】：

这里有同样的问题。我认为 react-admin 目前不可能。但我很想错了。
我想我找到了一种方法，基于 github 评论...让我知道你的想法
哈，这是我在 github 上的。在我在这里发布之后发现了这个例子。很高兴您在这方面取得了一些成功。
哈，我想可能是你。它让我走上了正确的道路......谢谢男人

标签： reactjs react-admin

【解决方案1】：

基于 Github 问题上的 comment，我最终实现了基于 simple example 的解决方法。

我做的主要事情是使用 noLayout 选项添加一些自定义路由。由于某种我在文档中找不到的原因，这些自定义路由似乎没有通过身份验证。

所以，我重新定义了我的 App.js 文件：

const App = () => (
  <Admin
        loginPage={Login}
        authProvider={authProvider}
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
        title="Example Admin"
        locale="en"
        customReducers={{ tree }}
        customRoutes={[
            <Route exact path="/forgotPassword" component={ForgotPassword} noLayout/>,
            <Route exact path="/resetPassword" component={ResetPassword} noLayout/>,
        ]}
    >
        {permissions => [
            <Resource name="users" {...users} />,
        ]}
  </Admin>
);

无论如何，这是我想出的解决方案，不确定它是否正确。如果您发现更好的东西，请告诉我。

【讨论】：

【解决方案2】：

我遇到了类似的问题，使用 noLayout 选项添加自定义路由仍然让我进入登录屏幕。

原来不是authProvider 的checkAuth 部分导致了这种情况。

原因是getPermissions 是authProvider 的一部分

在找不到权限的情况下，我有： return Promise.reject();

将其更改为：return Promise.resolve([]); 为我解决了这个问题。

【讨论】：

【解决方案3】：

我也在使用这样的解决方案。

但是我在添加noLayout时不能使用notify。

你有使用notify 和

<Route exact path="/forgotPassword" component={ForgotPassword} noLayout/>

【讨论】：

我在<Login>组件源码中找到的。我需要在忘记密码页面中添加<Notification />