[英]Private Component with a Private Route nested
I have a Component called "PrivateComponent", that check if a logged user has access to a App fragment (a component, or a route).我有一个名为“PrivateComponent”的组件,用于检查登录用户是否有权访问 App 片段(组件或路由)。
The point is: I can't use with Routes.关键是:我不能与路线一起使用。 I have an array of Routes, and i'm nesting these routes inside the Private Component.
我有一个路由数组,我将这些路由嵌套在私有组件中。 And...the routes don't render.
而且......路线不渲染。
There is the code:有代码:
Private Component:私有组件:
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路由列表.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
},
];
Where i try to list the routes我尝试列出路线的地方
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;
Only the first route at the array works.只有阵列上的第一条路线有效。
Edit:编辑:
PrivateRoute.js 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;
Complement: I tried to list the routes manually (without the map), and it works.补充:我尝试手动列出路线(没有地图),它有效。
Solved.解决了。 Or at least a solution.
或者至少是一个解决方案。 I put a Route nesting the
PrivateComponent
: edit: The Error Page wasn't showed before.我放置了一个嵌套
PrivateComponent
的路由:编辑:错误页面之前没有显示。 Now it works fine.现在它工作正常。
<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>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.