通过React Admin中的自定义登录页面进行身份验证时如何重定向到仪表板

Question

React admin使用“ /”路径到仪表板，因此，自定义登录页面默认不会打开，应用程序始终将我们带到仪表板。我已经实现了PrivateRoutes来处理令牌，以检查用户是否通过了身份验证，是否成功工作，默认情况下是登录页面，并在获得授权后进入仪表板。但是，它以某种方式破坏了侧边栏链接的功能，例如“用户”。

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}
  />
];

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.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;

资源“用户”不起作用，我是否也需要为此添加自定义路由。

Answer 1

好的，让我们逐步调试一下：

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

• 一旦包含authProvider，react-admin就会在/login上启用新页面路由，显示<Login>表格，要求输入用户名和密码。

• 您绝对可以自定义该登录页面（就像我想的那样），并且我建议您避免使用<PrivateRoute>，因为authProvider将所有尚未通过身份验证的用户重定向到/login。

• 请注意，<Admin>创建具有其自身状态，路由和控制器逻辑的应用程序。在您的代码中，添加了forgotPassword，它不是prop接受的<Admin。

<admin
   // remove this...
-  forgotPassword={ForgotPassword}
>

我想知道在这种情况下会遇到什么错误，但这是主要的错误。