代码之家 › 专栏 › 技术社区 › Aldo

在react admin中成功验证后,如何重定向到其他路由?

react-admin promise reactjs

2

Aldo · 技术社区 · 7 年前

使用react admin。

我有同样的问题 one ,因为答案对我和提问者都不起作用(见评论)。在主要版本更新之后,是否有其他选项可以在成功登录后重定向到自定义页面?

代码:

在自定义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_登录中,但效果并不理想。

2 回复 | 直到 7 年前

1

Prakash S 7 年前

目前 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

1

Michail Michailidis 7 年前

基于其他答案,我无法让它工作( 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" />);
        }
    }
}