У меня есть компонент с именем «PrivateComponent», который проверяет, есть ли у зарегистрированного пользователя доступ к фрагменту приложения (компоненту или маршруту).
Дело в том, что я не могу использовать с маршрутами,У меня есть массив маршрутов, и я вложил эти маршруты в частный компонент. И ... маршруты не отображаются.
Есть код:
Частный компонент:
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
};
routList.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;
Дополнение: Я попытался перечислить маршрутывручную (без карты), и все работает.