带有 Redux 和反应路由器的私有路由

Posted 2023-02-19

【中文标题】带有 Redux 和反应路由器的私有路由

【英文标题】：Private Route with Redux and react router

【发布时间】：2020-08-24 01:14:23

【问题描述】：

我有一个带有身份验证和私有路由的简单应用程序，如果用户有令牌，我想从服务器获取数据，后端准备好并且工作正常，我登录我在 redux 中有关于用户的数据，但我不知道如何处理刷新页面，我应该在哪里调度调用操作？如果我在 privateRoute.js 中这样做，它会很奇怪我想调用服务器的，但我做了 3-4 次。

这是我的组件，没有调用 sessionActions，sessionActions 应该更新 loggedIn 并且用户会转到 /login 页面

PrivateRoute

import React,  useState, useEffect  from 'react';
import  Route, Redirect  from 'react-router-dom';
import PropTypes from 'prop-types';
import  sessionAction  from '../store/actions/sessionAction';

const PrivateRoute = ( component: Component, ...rest ) => 
  const  path, dispatch, loggedIn  = rest;
  );

  return (
    <Route
      path=path
      render=(props) => (loggedIn ? <Component ...props />
     <Component ...props/>
        : (<Redirect to="/login" />))
    />
  );
;

PrivateRoute.propTypes = 
  component: PropTypes.func.isRequired,
;
export default PrivateRoute;

sessionAction

const sessionAction = (path) => (dispatch) => 
  return sessionServices(path)
    .then((response) => 
      console.log(response);
      const  data  = response;
      if (!data.error) 
        dispatch(success(data));
      
      dispatch(failure(data.error.text));
    )
    .catch((error) => error);
;

sessionService

import axios from 'axios';

axios.defaults.withCredentials = true;

const sessionServices = (path) => axios(
  method: 'post',
  url: `http://localhost:4000/api/pages$path`,
)
  .then((response) => response)
  .catch((error) => console.log(error));

export default sessionServices;

【参考方案1】：

您必须在作为***组件的 App 组件中调度操作以从服务器获取用户数据。另外，在reducer中保持一个加载状态来渲染一个Loader，直到获取到用户数据。

const App = props => 
    useEffect(() 
      this.props.sessionActions('/session')
    , []);
    if(this.state.isLoading) return <Loader />;
    const  loggedIn, user  = this.props;
    return (
      <Router>
         /* Your Private routes and other routes here */
      </Router>
    )



const mapStateToProps = (state) => 
   return 
      isLoading: state.auth.isLoading,
      user: state.auth.user,
      loggedIn: state.auth.loggedIn
   

export default connect(mapStateToProps,  sessionAction )(App);

【讨论】：

但我需要调度 sessionActions('/session') 并进入无限循环调用服务器

没有调度它只调用那些，但是我怎样才能在没有调度的情况下触发reduce？也许是关于 UseEffect 的？

可能我得到了一些东西，但仍然为什么要分派我的整个 app.js 渲染两次，而我仍然向服务器发送 2 个请求？

考虑到您正在使用钩子，我将使用钩子实现来更新我的答案。如果您仍然遇到问题，请分享更多您的应用代码

哦，我真的被卡住了用户应该留在页面上，但在我的页面已经重定向到之后我才知道。 /登录