Этот вопрос закрыт для ответов, так как повторяет вопрос Как запретить доступ гостям?
@hollanditkzn

Как сделать доступ только авторизованным пользователям?

Я прочел в документации примерно это делается так
<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')
);

AuthForm
import 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)

loginDucks
import 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 авторизация и присваивается при успешной авторизации сессия
У меня выходит
5a687d4d5baef635881315.png
Это я зашел и когда перезагружаю страницу то выходит что нет store
5a687d5ba9162708239669.png
  • Вопрос задан
  • 463 просмотра
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы