在ReactJS中应该如何处理经过身份验证和未经过身份验证的组件？

Question

我正在使用React Redux为我的Express API构建一个用户界面，我想知道如何处理通过身份验证和未经身份验证的用户。有两个应用程序组件是一个好主意，一个用于经过身份验证和未经身份验证的用户-如果JWT在用户登录后成功调度到redux状态，这两个组件将有条件地呈现在主组件(app.js)中。这是处理问题的好方法还是坏方法？

Answer 1

是的，为授权用户和未授权用户创建单独的组件是完全可以的。为什么不只创建一个组件并将值作为props传递，这样您就可以在单个组件中处理它呢？

Answer 2

我建议在你的主要应用程序组件中使用私有和公共路由。

这个blog article给出了一个很好的解释。

使用context-api，您的privateRoute.js可能如下所示：

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import AuthContext from '../../context/auth/authContext';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authContext = useContext(AuthContext);
  const { isAuthenticated, loading } = authContext;
  return (
    <Route
      {...rest}
      render={props =>
        !isAuthenticated && !loading ? (
          <Redirect to='/login' />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

export default PrivateRoute;

但是你必须从你的redux存储中查询AuthContext。