Я прочел в документации примерно это делается так
<Route exact path="/" render={() => (
!isAuthenticated ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
Только мне не понятно, откуда должно быть значение isAuthenticated. Есть конечно предположение что это на node делать и передавать axios запрос к нему, чтобы проверить сессия имеется открытая или нет и в props передавать это значение.
Моя реализация react
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import thunk from 'redux-thunk';
import Auth from './AuthForm';
import Home from './Home';
import Helmet from './aplication';
import loginReducers from './reducer/loginDucks';
const rootReducer = combineReducers({
login: loginReducers,
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));
ReactDOM.render(
<div>
<Helmet title='Авторизация'/>
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Auth}/>
/** Вот тут не понятно, мне надо поменстить вместо этого код
<Route exact path="/" render={() => (
!isAuthenticated ? <Redirect to="/"/> : <Home />
)}/> */
<Route path='/index' component={Home}/>
</Switch>
</BrowserRouter>
</Provider>
</div>,
document.getElementById('content')
);
AuthFormimport React, { Component } from 'react';
import { Redirect } from 'react-router';
import { connect }from 'react-redux';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { login } from './reducer/loginDucks';
injectTapEventPlugin();
class UserForm extends Component{
state = {
form: {
login: "",
password: ""
}
};
handleSubmit = e => {
e.preventDefault();
this.props.login(this.state.form);
};
handleChange = e => {
const { name, value } = e.target;
this.setState( prevState => ({
form: {
...prevState.form,
[name]: value,
}
}));
};
render(){
const { form } = this.state;
const { isLoading, isError, shouldRedirect, errorMessage } = this.props;
if (shouldRedirect) return <Redirect to='/index'/>;
return(
<div className='authForm'>
<h1>Авторизация</h1>
<div className='error'>{isError && errorMessage}</div>
<form onSubmit={this.handleSubmit}>
<MuiThemeProvider>
<TextField
hintText="Введите логин"
name="login"
fullWidth={true}
value={form.login}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<TextField
hintText="Введите пароль"
type="password"
name="password"
fullWidth={true}
value={form.password}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
</MuiThemeProvider>
</form>
</div>
);
}
}
const mapStateToProps = state => ({
isLoading: state.login.isLoading,
isError: state.login.isError,
shouldRedirect: state.login.shouldRedirect,
errorMessage: state.login.errorMessage,
});
const mapDispatchToProps = {
login,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserForm)
loginDucksimport axios from 'axios';
const LOGIN_REQUEST = 'LOGIN_REQUEST',
LOGIN_SUCCESS = 'LOGIN_SUCCESS',
LOGIN_ERROR = 'LOGIN_ERROR';
const loginSuccess = data => ({
type: LOGIN_SUCCESS,
payload: {id: data.id, login: data.login, name: data.name}
});
const loginError = data => ({
type: LOGIN_ERROR,
payload: data
});
export const login = form => async dispatch => {
try {
const res = await axios.post('/api/user', form);
if (!res.data || res.data === false) {
dispatch(loginError('Неправильный логин или пароль'));
} else {
dispatch(loginSuccess(res.data));
}
} catch (e) {
dispatch(loginError(e.response.data));
}
};
const initialState = {
isLoading: false,
isError: false,
shouldRedirect: false,
errorMessage: '',
user: false,
};
export default (state = initialState, action) => {
const { type, payload } = action;
switch(type){
case LOGIN_REQUEST:
return {
...state,
isLoading: true,
isError: false
};
case LOGIN_SUCCESS:
return {
...state,
user: payload,
isLoading: false,
shouldRedirect: true
};
case LOGIN_ERROR:
return {
...state,
errorMessage: payload,
isLoading: false,
isError: true,
};
default:
return state;
}
}
node я не показываю, потому что наверное смысла нет, что там идет через passport авторизация и присваивается при успешной авторизации сессия
У меня выходит
Это я зашел и когда перезагружаю страницу то выходит что нет store