Reactjs 登录页面在重定向时作出反应

我收到服务器关于当前用户身份验证状态的响应。基于这些信息，我正在呈现主页或登录页面。如何将所有未经授权的用户重定向到“/login”url，并将其他用户重定向到主页。当我使用history.push（'/login'）时，它会将permament保存在url中，因为在第一次呈现时，auth状态总是false

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;

从“React”导入React；
导入“/App.scss”；
从“./components/MainPage/MainPage”导入主页面；
从“react router dom”导入{withRouter，Route}；
从“./redux/authReducer”导入{getAuthStatusThunk}；
从'redux'导入{compose}；
从'react redux'导入{connect}；
从“./components/commons/preload/preload”导入预加载程序；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
this.state={isCheckingLogin:false}
this.getAuthStatusThunk=this.props.getAuthStatusThunk.bind（this）
}
componentDidMount（）{
getAuthStatusThunk（）
}
异步getAuthStatusThunk（）{
this.setState（{isCheckingLogin:true}）
let res=wait（checkIsLoggedIn（））
if（res.isLoggedIn）{
this.setState（{isCheckingLogin:false}）
}
否则{
this.props.history.push（“/login”）
this.setState（{isCheckingLogin:false}）
}
}
render（）{
返回(
{this.isCheckingLogin？：}
)
}
}
让mapStateToProps=（状态）=>({
isAuth:state.authPage.isAuth，
successStatus:state.authPage.successStatus
})
让FunctionRender=compose(
用路由器，
连接（MapStateTrops，{getAuthStatusThunk}））（应用程序）
导出默认函数render；

您可以将

加载

和

错误

值也保持在

状态

然后检查状态值中是否有一个是

set

或

not

。

---

根据状态值，相应地导航用户。

在调用

getAuthStatusThunk

时，可以将状态

IsCheckLogin

设置为true。这里我包括一个实现它的示例代码段

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>
        )
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）
this.state={isCheckingLogin:false}
this.getAuthStatusThunk=this.getAuthStatusThunk.bind（this）
}
componentDidMount（）{
getAuthStatusThunk（）
}
异步getAuthStatusThunk（）{
this.setState（{isCheckingLogin:true}）
let res=wait（checkIsLoggedIn（））
if（res.isLoggedIn）{
this.setState（{isCheckingLogin:false}）
}
否则{
this.props.history.push（“/login”）
this.setState（{isCheckingLogin:false}）
}
}
render（）{
返回(
{isCheckingLogin？：}
)
}
}

---

加载程序

组件可用于在检查登录状态时显示微调器或某种动画。

让res=wait（checkIsLoggedIn（））checkIsLoggedIn（）在做什么？正在检查身份验证的状态？我在headercheckIsLoggedIn中的完整组件是检查身份验证状态。如果它在标题中，您可以将状态和加载状态作为道具发送