Я пытаюсь сделать аутентификацию на основе 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
});
});
}
};
};