React JWT аутентификация всегда перенаправляет на страницу входа - PullRequest
0 голосов
/ 03 февраля 2019

Я пытаюсь сделать аутентификацию на основе jsonwebtoken.Вместо перенаправления на маршрут /select после нажатия на кнопку входа в систему страница просто обновляется и выдает запрос на повторный вход в систему, но токен извлекается из моего REST API и сохраняется в localStorage.Как я могу решить проблему?

Я использую react-redux и redux-thunk для отправки.

App.js

class App extends React.Component {
componentDidMount() {
    this.props.fetchUser();
}

render() {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact={true} path="/login" component={Login}/>
                <PrivateRoute exact={true} path="/select" component={ChooseVA}/>
                <PrivateRoute exact={true} path="/" component={HomePage}/>
            </Switch>
        </BrowserRouter>
    );
  }
}

//Assing actions to App as props
export default connect(null, actions)(App);

PrivateRoute.js

const PrivateRoute = ({ isLoggedIn, ...props }) => {

switch (isLoggedIn) {
    case null:
        return <div></div>;
    case false:
        return <Redirect to="/login" />;
    default:
        return <Route {...props} />;
   }
};

function mapStateToProps(state) {
    return {
       isLoggedIn: state.authenticationProperty
    };
}

export default withRouter(connect(mapStateToProps)(PrivateRoute));

Login.js (только handleSubmit)

  handleSubmit = (event) => {
   event.preventDefault();
    //Send data to server

   axios.post('/auth/login/web', {
      email: this.state.email,
      key: this.state.password
    }).then((res) => {
      if ('localStorage' in window && window.localStorage !== null) {
        localStorage.setItem('tkn', res.data.t);
        this.setState({toDashBoard: true});
       } else {
        window.alert('This Browser is not Supported! Please update!');
      }

   });
}

Auth Reducer:

export default function (state = null, action) {
    switch (action.type) {
        case FETCH_USER:
            return action.payload;
        default:
            return state;
    }
}

fetchUser() действие:

export const fetchUser = () => {
return function(dispatch) {
    if (!getJwt()) {
        dispatch({
            type: FETCH_USER,
            payload: false
        });
    } else {
        let axiosConfig = {
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
                'access-key': '1',
                'x-auth': getJwt()
            }
        };

        axios
            .get('/auth/me', axiosConfig)
            .then((user) => {
                dispatch({
                    type: FETCH_USER,
                    payload: user.data
                });
            }).catch(res => {
            localStorage.removeItem('tkn');
            dispatch({
                type: FETCH_USER,
                payload: false
            });
        });
     }
  };
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...