首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React Admin:如何在通过自定义<Dashboard>页面进行身份验证时重定向到<Login>

React Admin:如何在通过自定义<Dashboard>页面进行身份验证时重定向到<Login>
EN

Stack Overflow用户
提问于 2020-03-23 09:46:54
回答 1查看 2.6K关注 0票数 2

react-admin在基本"/"加载<Dashboard>。因此,自定义页面在默认情况下永远不会打开,因为<Admin>总是路由到仪表板。

我已经实现了<PrivateRoutes>来处理authentication,这是成功的。

默认情况下,将加载<Login>页面,并且在进行身份验证时,它将路由到仪表板。

挑战:这个过程破坏了Sidebar <links>的功能,就像“用户”一样。

代码语言:javascript
运行
复制
// CustomRoutes.js
export default [
  <Route exact path="/login" component={LoginPage} noLayout />,
  <Route exact path="/forgot-password" component={ForgotPassword} noLayout />,
  <Route exact path="/confirm-password" component={ConfirmForgotPassword} noLayout />,
  <PrivateRoute path="/" loggedIn={localStorage.getItem("access_token")} component={dashboard} />
];

然后..。

代码语言:javascript
运行
复制
// PrivateRoute.js
import React from "react";
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = ({ path, component: Component, ...rest }) => {
  const isLoggedIn = localStorage.getItem("access_token");

  return (
    <Route
      path={path}
      {...rest}
      render={props => isLoggedIn 
        ? <Component {...props} />
        : <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
      }
    />
  );
};

export default PrivateRoute;

以下是主<App>中的外观

代码语言:javascript
运行
复制
// App.js
const App = () => (
  <Admin
    theme={myTheme}
    dashboard={dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
    customRoutes={customRoutes}
    loginPage={LoginPage}
    logoutButton={LogoutButton}
    forgotPassword={ForgotPassword}
  >
    <Resource name="users" list={UserList} create={UserCreate} show={UserShow} icon={UserIcon} />
  </Admin>
);

export default App;

请注意<resource>“用户”不起作用。

我也需要为它添加自定义路线吗?

EN

回答 1

Stack Overflow用户

发布于 2020-03-25 08:52:23

好的,让我们一步一步地调试

我们可以利用react-admin直接通过authProvider处理authentication

  • 一旦包含了authProviderreact-admin就会在/login路由上启用一个新页面,

它显示一个询问用户名和密码的<Login>表单.

/login.

  • Kindly

  • 您肯定可以自定义登录页面(就像我假设的那样),并且我建议您避免使用<PrivateRoute>,因为authProvider重定向所有尚未通过authProvider身份验证的用户,注意<Admin>创建了一个具有自己的状态、路由和控制器逻辑的应用程序。

在代码中,添加了<Admin.不接受的forgotPassword

代码语言:javascript
运行
复制
<admin
   // remove this...
-  forgotPassword={ForgotPassword}
>

我想知道在这个例子中到底是什么错误,但这是主要的错误。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60811112

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档