I'm new into ReactJS - I'm trying to implement login system with PHP.
I want to have different type of users - some of them should have access only to some portion of app.
Is there any way to prevent those users from accessing certain routes as /admin ?
What I want is not something as simple function that check's user accessible routes and redirecting -> I would like to HIDE/REMOVE components that user has no access to, so he would download the app containing only /login /info, so he won't even download /admin component in app (won't be able to see the code for it)
You can use Higher-Order Components.
With HOC you can wrap other components.. if user have permissions you can return wrapped component, otherwise return null or redirect user to another route.
Related
I've building a lightweight preact widget that gives users different forms based on current url. I don't want to use preact-router as it would affect the routing of the parent website.
So I went with window.location. But the issue, I'm facing is when users navigate internally from one page to another,unless there is refresh, window.location doesn't update the current URL.
Hence if i want to send form 1 to users at /home and form 2 to users at /settings. Users get the same form for both /home and /settings when users navigate internally and only change when they do a refresh.
Can someone suggest me a lightweight solution to fix this? Does in-memory router works for my use-case?
I have few components in my app, one of them is admin component (or admin page with data). What is the most simple way for protecting that component with password. I want to require password when you click on component, and if passwords match, just render the component. (I don't need authentication services, just hard-coded password).
Found best way to do this, it is creating modal with portal and render it in desired component
Background Information:
I have been following admin-on-rest example to create my custom Admin app. I created a custom component that is pretty much the same as https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js
However I want to provide the functionality for users to signup within the application, so I added a Sign Up button, that we clicked will redirect to domain.com/signup
Problem:
After reading the Authentication docs and trying it out myself, I found that on each route change the event AUTH_CHECK is evaluated. However, in input params I get as resource something I already defined in my <Admin> component. Basically, I need a way to "whitelist" a path and allow users to navigate to that path without them being authenticated.
Questions:
Is there a way to create a custom signup page and whitelist the path "/signup" so that authentication is not checked?
Is this something I need to implement with custom React Router routes, or is it something at the authClient level?
Has anyone tried to add a new signup page, and how did you make it work?
I'm looking for a secure way to render React components based on a users permissions. I know I can use props like props.userStore.isAdmin to conditionally render a component:
{
this.props.userStore.isAdmin ? <AdminDashboard /> : null
}
but could a user modify those props to gain access to an admin dashboard?
I have the controller on the backend (rails) secured with the pundit gem, so the user would not be able to actually use the admin dashboard to do damage, but I'd still rather them not be able to access it all. Is this possible with React?
I'm trying to come up with a way to update routes in react-router after a user logs in and I know what roles the user has.
I was hoping that there would be an API where I could add appropriate routes after the user logs in but no luck there.
I'm currently thinking that I could use the lazy loading so that I originally load the root Route which has a child for each role, then in the definition of those children could use getChildRoutes to test for the presence of the required role before lazy loading the allowed routes.
Has anyone implemented something like this and have a working/better solution?