在 react-admin 中成功认证后如何重定向到其他路由？答案

【问题标题】：How to redirect to some other route after successful authentication in react-admin?在 react-admin 中成功认证后如何重定向到其他路由？
【发布时间】：2019-02-20 20:27:06
【问题描述】：

使用 react-admin。

我和one 有同样的问题，因为答案对我和提出问题的人都不起作用（请参阅 cmets）。大版本更新后，是否还有其他选项可以在登录成功后重定向到自定义页面？

代码：

在我的自定义 authProvider 中，在检查身份验证时，我试图重定向到自定义页面：

if (type === AUTH_CHECK) {
     ...
      if (localStorage.getItem("pageID")) {
            return Promise.resolve() // goes to Dashboard
     else {
        return Promise.resolve({ redirectTo: '/pages' }); // needs to go to a custom page
    }

但是，Promise.resolve({ redirectTo: '/pages' }) 根本不起作用。

如果我确实使用Promise.reject({ redirectTo: '/pages' })，它会尝试重定向到pages，但是，由于AUTH_CHECK 失败，它会返回登录并保持循环。

我也试过把这段代码放在 AUTH_LOGIN 里面，但是效果不好。

【问题讨论】：

How to redirect to some other route after successful authentication in react-admin的可能重复

标签： reactjs promise react-admin

【解决方案1】：

目前userLogin 操作不处理重定向路径 url，这就是您没有被重定向的原因。有两种方法可以实现这一目标。自定义登录页面或自定义仪表板组件

自定义登录页面

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { userLogin } from 'react-admin';

class MyLoginPage extends Component {
    submit = (e) => {
        e.preventDefault();
        // gather your data/credentials here
        const credentials = { };

        // Dispatch the userLogin action (injected by connect)
      if (localStorage.getItem("pageID")) {
        this.props.userLogin(credentials, "/pages");
      }else {
        this.props.userLogin(credentials);
      }
    }

    render() {
        return (
            <form onSubmit={this.submit}>
            ...
            </form>
        );
    }
};

export default connect(undefined, { userLogin })(MyLoginPage);

自定义仪表板

import React, { Component } from 'react';
import { push } from 'react-router-redux';


export class MyDashBoard extends Component {
    componentDidMount() {
          if (localStorage.getItem("pageID")) {
            push("/pages");
          }
    }

    render() {
        return (

        );
    }
};

【讨论】：

【解决方案2】：

我无法根据其他答案 (https://stackoverflow.com/a/52360387/986160) 让它工作，所以我确实喜欢 react-admin 2.6.2：

https://stackoverflow.com/a/54422728/986160

import React, { Component } from 'react';
import { Redirect } from 'react-router';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';

export default class Dashboard extends Component {

    render() {
        if (localStorage.getItem("user_role") !== "special_role") {
            return <Card>
                <CardHeader title="Welcome to Dashboard" />
                <CardContent></CardContent>
            </Card>
        }
        else {
            return (<Redirect to="/route/to/redirect" />);
        }
    }
}

【讨论】：