reactjs - How to implement forgot password page on react-admin
问题描述
I have a dashboard implemented on react-admin. The authentication process was done following this tutorial.
Now I need to implement a forgot password screen, but the problem is that this screen needs to be accessible without being logged in...
I thought of 2 possible ways to implement this:
- Ideally I would like to configure react-admin to allow unauthenticated access to a particular route. Not sure on how to do this, or if it is possible... I found this Github issue mentioning this as an enhancement, but it does not explain how to get around the issue.
- Implement this screen separately in react and handle routing to this page separately. Not sure on how to do this on the framework either...
Can someone explain how to implement either option on the framework?
Thanks in advance,
解决方案
Based on a comment on the Github issue, I ended up implementing a workaround based on the simple example.
The main thing I did was to add a few custom routes with the noLayout option. These custom routes do not seem to go through authentication for some reason I could not find in the documentation.
So, I redefined my App.js file:
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>
);
Anyways, this is the solution I came up with, not sure if it is the right one. Please let me know if you find something better.
推荐阅读
- java - RxJava Observable.create 不为 switchIfEmpty(observable) 发出事件
- java - Java - 使 ArrayList 值为游戏旋转
- javascript - 缩放对象上的反弹动画
- acumatica - 根据 BAccount 类型隐藏 From:BAccount 上的自定义字段
- java - 使用 JPanel 绘图使 JScrollPanel 动态调整大小
- laravel - 使用存储在缓存/存储而不是数据库中的数据
- php - Wordpress 发布迁移到谷歌云问题
- python - 将文件输入到多个矩阵
- angular - 可滚动内容 - 角度日历
- node.js - 在生产服务器上使用 find() 时,Node/Mongoose 只返回一个文档