在ReactJS中应如何处理已认证和未认证的组件？

问题描述

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

解决方法

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

我建议您在主应用程序组件中使用私有和公共路线。

此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。

reactjs reactjs