LoginPage в реакции с перенаправлением - PullRequest
Новая
       16

LoginPage в реакции с перенаправлением

0 голосов
/ 01 марта 2020

У меня есть ответ от сервера о статусе авторизации текущего пользователя. На основании этой информации я рендеринг HomePage или LoginPage. Как я могу перенаправить всех неавторизованных пользователей на URL / логин и других на домашнюю страницу. Когда я использую history.pu sh ('/ login'), он сохраняет постоянный адрес в URL, потому что при первом рендеринге статус авторизации всегда ложен 

import React from 'react';
import './App.scss';
import MainPage from './components/MainPage/MainPage';
import { withRouter, Route } from 'react-router-dom';
import { getAuthStatusThunk } from './redux/authReducer';
import { compose } from 'redux';
import { connect } from 'react-redux';
import Preloader from './components/commons/Preloader/Preloader';


class App extends React.Component {
  constructor() {
    super()
    this.state = { isCheckingLogin: false }
    this.getAuthStatusThunk = this.props.getAuthStatusThunk.bind(this)
  }
  componentDidMount() {
    getAuthStatusThunk()
  }
  async getAuthStatusThunk() {
    this.setState({ isCheckingLogin: true })
    let res = await (checkIsLoggedIn())
    if (res.isLoggedIn) {
      this.setState({ isCheckingLogin: false })
    }
    else {
      this.props.history.push('/login')
      this.setState({ isCheckingLogin: false })
    }
  }

  render() {
    return (
      <React.Fragment>
        {this.isCheckingLogin ? <Preloader isLoading={true} /> : <MainPage />}
      </React.Fragment>
    )
  }
}

let mapStateToProps = (state) => ({
  isAuth: state.authPage.isAuth,
  successStatus: state.authPage.successStatus
})

let FunctionRender = compose(
  withRouter,
  connect(mapStateToProps, { getAuthStatusThunk }))(App)

export default FunctionRender;

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

Вы можете установить состояние isCheckingLogin в true, когда вы вызываете getAuthStatusThunk. Здесь я включаю пример фрагмента для его реализации. 

class App extends React.Component {
    constructor() {
        super()
        this.state = { isCheckingLogin: false }
        this.getAuthStatusThunk = this.getAuthStatusThunk.bind(this)
    }
    componentDidMount() {
        getAuthStatusThunk()
    }
    async  getAuthStatusThunk() {
        this.setState({ isCheckingLogin: true })
        let res = await (checkIsLoggedIn())
        if (res.isLoggedIn) {
            this.setState({ isCheckingLogin: false })
        }
        else {
            this.props.history.push('/login')
            this.setState({ isCheckingLogin: false })

        }
    }

    render() {
        return (
            <React.Fragment>
                {isCheckingLogin ? <Loader /> : <MainPage />}
            </React.Fragment>
        )
    }
}

Компонент Loader может использоваться для отображения счетчика или какой-либо анимации, пока проверяется состояние входа в систему, если хотите.

0 голосов
/ 01 марта 2020

Вы можете сохранить значения loading и error также в state. Затем проверьте, является ли любое из значений состояния set или not. На основе значения состояния соответственно перемещайтесь по пользователю.

...