Question

我正在尝试使用react-redux和react-router 4制作基于令牌的应用程序。在这里，我使用HOC requiesAuth调用所有路由，该令牌进行令牌API调用，以检索true或false。

如果为true，则在同一路由上继续，否则重定向到“ /登录”。

我遇到的问题是在进行登录调用API历史记录时。push不会将我重定向到首页，而是停留在同一条路线上。下面是我的代码。

index.js

<Provider store={store}>
    <BrowserRouter>
        <Routes />
    </BrowserRouter>
</Provider>

Routes.js

import  {Switch, Route, Redirect} from "react-router-dom";

const Routes = ({token}) => (
  <Switch>
    <Route path="/home" render={props => (
      token ? <Home {...props}/> : <Redirect to="/login"/>
    )}
    />
  </Switch>
)

export default requiresAuth(Routes);

RequiresAuth.js

import React from "react";
import { connect } from "react-redux";
import { validateLoginToken } from "../../components/utils/api";

function RequiresAuth(WrappedComponent) {
    return connect(
        null,
        null
    )(
        class extends React.Component {
            state = { loading: true, tokenValidity: false };

            componentDidMount = () => {
                if (localStorage.getItem("token")) {
                    // please consider below call will return true or false
                    this.props.dispatch(
                        validateLoginToken(
                            "token-validate",
                            this.setLocalState
                        )
                    );
                } else {
                    this.setLocalState(false);
                }
            };

            setLocalState = tokenSate => {
                this.setState({ loading: false, tokenValidity: tokenSate });
            };

            render() {
                return this.state.loading ? (
                    <div>
                        <Loader/>
                    </div>
                ) : (
                    <WrappedComponent
                        tokenValidity={this.state.tokenValidity}                 
                    />
                );
            }
        }
    );
}

export default RequiresAuth;

并且在进行登录API调用时，我试图在服务器成功响应后执行history.push（“ / home”）。

问题- 1.就像我上面第一次提到的那样，当我尝试登录URL时，URL仍然相同，并且没有路由到家中。 2.当我没有令牌并且单击“ / home”时，它将路由回登录，这很好，但是在那之后再次将登录阻止到登录页面。

请提供解决方案。

history.push React在react-redux的特定情况下不起作用

0 个答案: