я продолжаю выходить из системы, даже если я установил аутентификацию с защищенными маршрутами в реакции / избыточности?когда я обновляю страницу - PullRequest
Новая
       33

я продолжаю выходить из системы, даже если я установил аутентификацию с защищенными маршрутами в реакции / избыточности?когда я обновляю страницу

0 голосов
/ 12 февраля 2019

Я пытаюсь создать защищенные маршруты с реакцией и редукцией, я сделал действия на редуксе для инициации auth ()!Вот маршрут: 

    <BrowserRouter baseName="/">
                        <Switch>
                            <PublicRoute  authenticated={this.props.isAuthenticated} exact path="/loginapp" component={LoginApp}  />
                            <PrivateRoute  authenticated={this.props.isAuthenticated} exact path="/dashboard" component={dashboardContainer} />
                            <PrivateRoute  authenticated={this.props.isAuthenticated} exact path="/leaderboard" component={leaderBoardContainer} />
                        </Switch>
                    </BrowserRouter>

Вот пользовательский маршрут: 


export const PublicRoute = ({component: Component, authenticated, ...props}) => {
    const { from } = props.location.state || { from: { pathname: "/dashboard" } };
    return (
        <Route
            {...props}
            render={(props) => authenticated === true
                ? <Redirect to={from} />
                : <Component {...props} />}
        />
    );
};


class PrivateRoute extends React.Component  {
    render() {
        const { component: Component, authenticated, ...rest }  = this.props;
        const isLoggedIn = authenticated;

        return (
            <Route
                {...rest}
                render={props => isLoggedIn 
                    ? <Component {...props} />
                    : <Redirect to={{ pathname: "/loginapp", state: {from: props.location }}} />}
            />
        );
    }
};

У меня есть 3 маршрута, / loginapp, / панель инструментов, / таблица лидеров, в которых, как я хотел, пользователь долженне просматривать / loginapp маршрут снова, если пользователь обновляет страницу и автоматически должен войти в систему с данными, сохраненными в Redx.Но когда я обновляю страницу, данные теряются, и ОСТАЕТСЯ В / LOGINAPP маршруте, И Я ДОЛЖЕН ВХОДИТЬ В РУЧНОЙ.

Вот мой код loginapp: 

import PropTypes from "prop-types";
import * as actions from "../store/actions";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import classes from "./LoginApp.scss";

class LoginApp extends Component {

    constructor(props) {
        super(props);
    }

    pushme =() => {
        console.log("==================");
        this.props.initAuth();
        this.props.authHandler();
    }


    loginFormHandler = () => (
        <div>
            <span>this is login page</span>
            <button type="button" onClick={this.pushme}>get login</button>
        </div>
    );

    render() {
        return (
            <div className={classes.LoginApp}>
                {this.loginFormHandler()}
            </div>
        );

    }
}

LoginApp.propTypes = {
    initAuth: PropTypes.func,
    authHandler: PropTypes.func,
    isAuthenticated: PropTypes.bool,
    location: PropTypes.object
};


const mapStateToProps = state => {
    return {
        isAuthenticated:  state.auth.isAuthenticated
    };
};

const mapDispatchToProps = dispatch => {
    return {
        initAuth: () => dispatch(actions.initAuth()),
        authHandler: () => dispatch(actions.authSignIn())
    };
};
export default connect(mapStateToProps,mapDispatchToProps)(LoginApp);

вот создатель действия / и я уже создал редуктор: 

export const authSignIn = () => async (dispatch) => {
    const success = await auth.signInWithEmailAndPassword("iphonexs@apple.com", "12345678").catch((error) =>  console.error(error));
    success.user.uid !== undefined ?
        dispatch(authSuccess(success.user.displayName)) : 
        dispatch(authFailed("INVALID : FAILED TO LOG IN "));

};

Пожалуйста, посмотрите.я застрял.

1 Ответ

0 голосов
/ 12 февраля 2019

Я хотел, чтобы пользователь больше не просматривал маршрут / loginapp, если пользователь обновляет страницу и автоматически должен войти в систему, используя данные, сохраненные в Redx.Но когда я обновляю страницу, данные теряются, и ОНО остается в пути / LOGINAPP, и я должен войти в систему вручную.

Это ожидаемое поведение.Redux не является постоянным хранилищем данных, когда вы перезагрузите страницу, все исчезнет.Чтобы сохранить статус аутентификации при перезагрузках, вам необходимо сохранить состояние в sessionStorage или localStorage с учетом ваших потребностей.

Также следующий вопрос может быть полезен дляyou.

...