reactjs - React-Router中的PrivateRoute，HOC在经过身份验证后仍然重定向到登录？

问题描述

我正在尝试利用从 redux 商店到 HOC 的状态来允许或拒绝我的 *app 中的用户，例如私有路由。

我正在关注 React-Router 的文档，并且它成功了一半。我的问题是当我转到 URL 或刷新新验证的路由时，如果未通过验证，我会被重定向。单击导航栏的作品，请参阅下面的 gif。

*我也在使用 Next.JS，但无法让路由系统与 Semantic-UI-React 一起使用。这就是我使用 React-Router 的原因。

这是我的完整组件：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { logInUser, logOutUser } from '../store/index'
import { bindActionCreators } from 'redux'

import {
 BrowserRouter as Router,
 Switch,
 Route,
 Redirect,

 withRouter
} from 'react-router-dom'

import LinkNavWithLayout from './LinkNavWithLayout'
import Index from './home'
import Profile from './profile'
import Dashboard from './dashboard'
import Login from './login'
import Register from './register'

class App extends Component {
 static getInitialProps({ store, isLoggedIn, logInUser, logOutUser }) {
  return { store, isLoggedIn, logInUser, logOutUser }
 }

 constructor(props) {
  super(props)

  this.state = {
   isLoggedIn: false
  }

 }

 render(){
  const { isLoggedIn } = this.props;

 console.log("pages/index this.props ", this.props);
  let navBars = [
   { name: "Home", path: "/"},
   { name: "Profile", path: "/profile"},
   { name: "Dashboard", path: "/dashboard"},
   { name: "Log in", path: "/login"},
   { name: "Register", path: "/register"}
  ];

我的 HOC PrivateRoute 组件：

  function PrivateRoute({ children, ...rest }) {
   return (
    <Route
     {...rest}
     render={({ location }) =>
      isLoggedIn ? (
       children
      ) : (
        <Redirect
         to={{
          pathname: "/login",
          state: { from: location }
         }}
        />
       )
     }
    />
   );
  }

  return (
    <>
    <Switch>
     <Route
      path='/'
      exact
      render={(props) => <LinkNavWithLayout {...props} data={navBars}><Index /></LinkNavWithLayout>} />

我正在使用它/profile和/dashboard路线

     <PrivateRoute
      path='/profile'
      isLoggedIn={isLoggedIn}
      >
      <LinkNavWithLayout data={navBars}><Profile /></LinkNavWithLayout>
     </PrivateRoute>

     <PrivateRoute
      path='/dashboard'
      isLoggedIn={isLoggedIn}
     >
      <LinkNavWithLayout data={navBars}><Dashboard /></LinkNavWithLayout>
     </PrivateRoute>

     <Route
      path='/login'
      render={(props) => <Login {...props}/>}
     />

     <Route
      path='/register'
      render={() => <Register />}
     />

     <Route component={({ location }) => <p>Sorry but the page <h1>{location.pathname.substring(1)} </h1> Page, Could Not be found</p>} />
    </Switch>
    </>
  )
 }
}

function mapStateToProps(state) {
 const { isLoggedIn } = state
 return { isLoggedIn }
}

const mapDispatchToProps = dispatch =>
 bindActionCreators({ logInUser, logOutUser }, dispatch)

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

提前致谢！我已经被困了一段时间，所以任何帮助将不胜感激！

标签： reactjsauthenticationreduxnext.jsreact-router-dom

reactjs - React-Router中的PrivateRoute，HOC在经过身份验证后仍然重定向到登录？

问题描述

解决方案

推荐阅读