Question

我正在尝试在我的反应应用程序中制作基本身份验证流程。

我使用redux和redux-persist将我的状态存储到localstorage中。

这是一个PrivateRoute组件，用于检查用户身份验证然后重定向到Login或实际组件（私有）。

当authenticated设置为false时，它的工作正常。但是当我成功登录时，即使我的authenticated成立，它也不会渲染我的组件。 （我记录了变量，我看到验证是真的，登录成功）

＆＃13;

import React from 'react';
import PropTypes from 'prop-types';
import { Route } from 'react-router';
import { Redirect } from 'react-router-dom';
import { isAuth } from 'redux/actions/auth/A_auth';
import App from 'layout/pages/App';
import { connect } from 'react-redux';

class PrivateRoute extends React.Component {

   constructor(props) {
      super(props);
   }

   render() {
      const {authenticated, component: Component, ...rest } = this.props;
      console.log(this.props);
      return (
         <Route {...rest} render={props => (
            authenticated ? (
               <App>
                  <Component {...props}/>
               </App>
            ) : (
               <Redirect to={{
                  pathname: '/login',
                  state: { from: props.location }
               }}/>
            )
         )}/>
      );
   }
}

PrivateRoute.propTypes = {
   authenticated: PropTypes.bool
};

const mapStateToProps = state => {
   return {
      authenticated: state.auth.authenticated
   }
};

export default connect(mapStateToProps)(PrivateRoute);

＆＃13;

当authenticated == false重定向到Login.js但true时它不会呈现实际组件。当我删除if语句并只渲染<App><Component.../></App时它工作正常，但在这种情况下身份验证不起作用。

这是我的index.js，它是root render。

render(
<Provider store={store}>
  <Router children={routes}/>
</Provider>, window.document.getElementById('app'));

这是我的routes.js

＆＃13;

import React from 'react';
import { Route } from 'react-router-dom';
import Home from 'layout/pages/home';
import NewClient from 'layout/pages/newclient';
import EditClient from 'layout/pages/editclient';
import Login from 'layout/pages/login';
import PrivateRoute from 'routes/PrivateRoute';

export default (
   <div>
      <PrivateRoute path="/" component={Home} exact/>
      <PrivateRoute path="/home" component={Home} exact/>
      <PrivateRoute path="/client/new" component={NewClient}/>
      <PrivateRoute path="/client/edit/:apiKey" component={EditClient}/>
      <Route path="/login" component={Login}/>
   </div>
);

＆＃13;

感谢。

Answer 1

解决。

我改变了这个

<Redirect to={{ pathname: '/login', state: { from: props.location } }}/>

到这个

<Login/>

重定向组件导致问题仍然不知道原因。

React router v4身份验证问题

1 个答案: