【问题标题】:How to re-route a React-Admin url如何重新路由 React-Admin url
【发布时间】:2022-09-23 10:05:38
【问题描述】:

我正在尝试为我的 React-Admin 应用程序配置登录页面。根据documentation,我正在使用authProviderLoginPage 组件,并且我的登录过程通常正常工作。

我的应用程序在端口 3000 上本地运行。但是当我转到 http://localhost:3000 时,我会自动重定向到 http://localhost:3000/#/login。

具体是什么推动了这种重定向?我没有在应用程序本身中指定 .../#/login url。

我使用的是旧版本的 React-Admin (2.9),据我所知使用的是 Redux。重定向到 .../#/login 是 Redux 的功能吗?还是 React-Admin 本身?

我的 understanding is 我也许可以使用 HashHistory 或 BrowserHistory 来防止 # - 但不确定这是否与 React-Admin 兼容。

我遇到的实际问题是,一旦我将应用程序部署到我的域,登录过程的行为与我在 localhost 上运行时的行为不同——这使得部署前测试变得困难。

即 http://localhost:3000 和 http://localhost:3000/#/login 都可以让我登录成功。但是当我部署到我的域时,http://www.example.com 允许我登录,而http://www.example.com/#/login 不允许。

知道为什么会这样吗?我可以将 React-Admin 应用程序配置为不是重新路由到http://www.example.com/#/login

  • 我在文档中找不到任何内容,但作为一种解决方法,您可以自定义 <Login> 组件并将 <Redirect> 放入您的根目录中。

标签: reactjs redux react-admin


【解决方案1】:

“如果 promise 被拒绝,react-admin 默认会重定向到 /login 页面。 您可以通过拒绝具有 redirectTo 属性的对象来覆盖在 checkAuth() 中重定向用户的位置:"

反应管理员 2.9: https://marmelab.com/react-admin/doc/2.9/Authentication.html#checking-credentials-during-navigation

// in src/authProvider.js (React-admin 2.9)
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        // ...
    }
    if (type === AUTH_LOGOUT) {
        // ...
    }
    if (type === AUTH_ERROR) {
        // ...
    }
    if (type === AUTH_CHECK) {
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject({ redirectTo: '/no-access' });
    }
    return Promise.reject('Unknown method');
};

反应管理员 4.3:https://marmelab.com/react-admin/AuthProviderWriting.html

// in src/authProvider.js
export default {
    login: ({ username, password }) => { /* ... */ },
    checkError: (error) => { /* ... */ },
    checkAuth: () => localStorage.getItem('auth')
        ? Promise.resolve()
        : Promise.reject({ redirectTo: '/no-access' }),
    // ...
}

【讨论】:

猜你喜欢
  • 2018-02-13
  • 2016-12-20
  • 1970-01-01
  • 1970-01-01
  • 2019-01-02
  • 2017-02-21
  • 2017-07-25
  • 2022-01-10
  • 2014-12-02
相关资源
最近更新 更多