Question

我有一个名为“ PrivateComponent”的组件，该组件检查登录的用户是否有权访问应用程序片段（组件或路由）。

重点是：我不能与Routes一起使用。我有一组路由，并且将这些路由嵌套在私有组件中。而且...路线不呈现。

有代码：

私有组件：

import React from "react";
import { useSelector } from "react-redux";
import PropTypes from "prop-types";
/*
 * PrivateComponent: Component that check if the logged User has access to Component involved on "yes" prop.
 */
const PrivateComponent = props => {
    const userFeatures = useSelector(state => state.userFeatures);
    console.log(props.children);
    const checkPermission = () => {
        if (userFeatures.user) {
            const modules = userFeatures.user.modules;
            const find = modules.find(module => {
                return module.features.find(f => {
                    return f.name === props.codFeature;
                });
            });
            if (find) {
                return true;
            } else {
                return false;
            }
        } else {
            console.log("usuário não encontrado");
            return false;
        }
    };

    return checkPermission() ? props.children : props.no ? props.no() : <span>oi</span>;
    //return show && <div>{props.children}</div>;
};

export default PrivateComponent;

PrivateComponent.propTypes = {
    codFeature: PropTypes.string.isRequired,
    no: PropTypes.any
};

routesList.js


const routesList = [
    {
        id: 5,
        path: "/module-reg",
        exact: false,
        private: true,
        component: ModuleReg,
        feature: featuresCod.CREATE_MODULE
    },
    {
        id: 4,
        path: "/permissions",
        exact: false,
        private: true,
        component: PermissionsPage,
        feature: featuresCod.UPDATE_PERMISSIONS
    },
    {
        isModule: true,
        path: "/adm",
        exact: true,
        private: true,
        component: HomePage
    },
];

我在哪里列出路线

import React from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";

import PrivateRoute from "./../components/PrivateRoute";
import LoginPage from "./../pages/LoginPage/";
import routesList from "./routesList.js";
import ErrorsPage from "../pages/errors/errorspage";
import PrivateComponent from "./../components/PrivateComponent";

const Routes = () => {
    const renderRoutes = () => {
        return routesList.map((route, i) => {
            console.log(route.path, route.feature ? true : false);
            if (route.feature) {
                return (
                    <PrivateComponent
                        codFeature={route.feature}
                        key={i}
                        no={() => <Route render={() => <ErrorsPage error={401} />} />}
                    >
                        <PrivateRoute key={i} path={route.path} exact={route.exact} component={route.component} />
                    </PrivateComponent>
                );
            } else {
                return <PrivateRoute key={i} path={route.path} exact={route.exact} component={route.component} />;
            }
        });
    };


    return (
        <div>
            <Router>
                <Switch>
                    <Route path="/login" exact component={LoginPage} />
                    {renderRoutes()}
                    <Route component={prop => <ErrorsPage error={404} history={prop.history} />} />
                </Switch>
            </Router>
        </div>
    );
};

export default Routes;

只有数组中的第一条路线有效。

编辑：

PrivateRoute.js

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { Redirect, Route } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { logout } from "./../../redux/reducers/auth";
import { getUserFeatures } from "./../../redux/reducers/userfeatures";
import { getToken } from "./../../services/auth/auth";
import { postVerification } from "./../../services/api/login";

const PrivateRoute = props => {
    let { component: Component, ...routeProps } = props;
    const logged = useSelector(state => state.auth);
    const dispatch = useDispatch();
    useEffect(() => {
        const verifyAuthentication = async () => {
            const token = getToken();
            if (logged.isLogged) {
                await postVerification({ token, username: logged.user.login })
                    .then(() => {

                        getUserFeatures(logged.user.employee_code)(dispatch);
                    })
                    .catch(err => {
                        dispatch(logout());
                    });
            } else {
                dispatch(logout());
            }
        };
        verifyAuthentication();
    }, [dispatch, logged.isLogged, logged.user.employee_code, logged.user.login, logged.user.modules]);

    return (
        <div>
            <Route
                {...routeProps}
                render={prop =>
                    logged.isLogged && logged.isAuthenticated ? (
                        <div>
                            <Component {...prop} />
                        </div>
                    ) : (
                            <Redirect to="/login" />
                        )
                }
            />
        </div>
    );
};

PrivateRoute.propTypes = {
    component: PropTypes.any
};

export default PrivateRoute;

补充：我试图手动列出路线（没有地图），并且可行。

Answer 1

解决了！或至少是一个解决方案。我放置了一条嵌套PrivateComponent的路线：编辑：错误页面之前没有显示。现在可以正常工作了。

<Route
  key={route.path}
  path={route.path}
  component={() => (
    <PrivateComponent
      codFeature={route.feature}
        no={() => <ErrorsPage />} />}
    >
      <PrivateRoute
        path={route.path}
        exact={route.exact}
        component={route.component}
      />
  </PrivateComponent>
  )}
/>

带有私有路由嵌套的私有组件

1 个答案: