How in my project only admin can access to /page/admin?
Here my code in module config:
auth : authRoles.admin,
routes : [
{
path : '/page/admin',
component: React.lazy(() => import('./Page')),
},
],
auth : authRoles.notadmin,
routes : [
{
path : '/page',
component: React.lazy(() => import('./Page'))
}
//
]
And this, is my auth role:
const authRoles = {
Admin : ['Admin'],
NotAdmin : ['Admin', 'User'],};
The page/admin, is different from the /page
But the User "NotAdmin" can access too page/admin.
Lets try to understand your problem. You are using React Router, I assume. If yes, you have to create a PrivateRoute, then you should be able to check if someone is authenticated or has some role. Take a look on this page. https://reacttraining.com/react-router/web/example/auth-workflow
Related
I am trying to redirect my app on a condition. If it's login as a teacher then it must redirect to teachers profile otherwise it should redirect to student profile and if it's not login then it must redirect to login.
(() => {
if (isLoggedIn() !== "false")
AppRoutes.push({
path: isLoggedIn() === "teacher" ? "/tabs/home" : "/",
exact: true,
Component: isLoggedIn() === "teacher" ? TeachersProfile : ITCStudent,
});
else
AppRoutes.push({
path: "/",
exact: true,
Component: Login,
});
})();
This code is setting up the default component but i want to redirect to the profile page
Ionic React 5 and 6 are using React Router 5 (not React Router 6).
So one way is to redirect with useHistory().
const history = useHistory();
history.push('/redirect-path');
I'm not sure what AppRoutes is in your example, but if you have defined all your routes in , then you can just push to the path; you don't need to be passing the component.
So I have this routes.ts file where I've stored all the routes of my React app that I created with create-react-app. The routes get imported whenever I need to insert some route-related data.
tl;dr Webpack has no issue with a module elsewhere but says it's undefined at one spot.
Here's all the information you need to help me out 🙂
routes.ts
import { Route, PageName } from ".";
...
const routes: Record<PageName, Route> = {
landing: {
PATH: "/landing",
BASENAME: "landing",
TITLE: env.app.NAME,
Page: Landing,
},
...
}
Works fine everywhere else but here:
navbar-utils.ts
import { routes } from "../../config";
...
const navItems: NavItem[] = [
{
text: "Home",
icon: faHome,
to: routes.landing.PATH,
},
...
]
There is where Webpack loses it and keeps telling me that _config__WEBPACK_IMPORTED_MODULE_0__.routes is undefined.
I want to implement Protected Routes using React Route config .
As I understand, you can now add render method in config
{
{
path: "/restricted-area",
render: (props) => isUserLoggedIn() ? <RestrictedArea/> : <Redirect to="/login"/>
},
{
path: "/login",
component: Login
}
}
https://github.com/ReactTraining/react-router/pull/6217
If anyone need this behavior, I recommend this protected-react-routes-generator
it will handle all the logic for you, you only need to provide the structure.
I have a React/Redux Universal application and I have recently added i18next to add internalization to my website.
In my react-router config, I have edited my routes:
const routes = [
{
component: App,
routes: [
{ path: '/:lng(fr|en)?/', exact: true, component: Home },
{ path: '/:lng?/about', component: About },
…
{ component: NotFound }
]
}
];
Everything works well, but I don't know how to keep the lng paramaters between my pages. Indeed, when I use <Link to="/about" >, I logically lost my params.
So, how to keep this parameter?
Thanks
In react-router there's withRouter HOC that provides access to location.pathname
How can I get it in Universal Router?
history.location.pathname is only available in the browser so can't use that.
If you have universal routes like this:
const routes = {
path: '/page',
name: 'page',
parent: null,
children: [],
action(context, params) {
return '<h1>The Page</h1>'
},
}
(example from documentation https://github.com/kriasoft/universal-router/blob/master/docs/api.md). then you will have context.pathname inside the action. Hope it will help!