How to restrict users Routes in reactjs - reactjs

How can i restrict users routes ?
I want to restrict users maually typing url in the address bar , for Eg: http://localhost:3000/admin if the user is in https://localhost/users.
I want only the admin to use the /admin route.
I'm trying to build multi user blog,
and for the route /admin,
i don't want normal users to maually type the route in address bar like http://localhost:3000/admin where the /admin route is only for admin ,
so whenever the user types manually in address bar as http://localhost:3000/admin
i want to display the error message and redirect the user back to root page.
I'm using useEffect of react and authenticating the user for normal user and admin and using Router.push('/') if the user is not admin and also want to display the page which says ENTRY RESTRICTED , the error message i am getting from the api by res.json().
It is working but the the issue is the user is still able to see the admin dashboard for like 2/3 secs,
and then it is being redirected to the root page.
I want to restrict that and display the message.
REPO :
https://github.com/nitink66/blog-frontend
https://github.com/nitink66/blog-backend
I'm also trying to not push node_modules folder into github by adding .gitignore but for some reasons it is not working.

For role based:
Follow React Rolebased example. This might be help to you
Repo:
to ignore node_modules
replace below code
/node_modules

Related

Figure out from where user landing on a URL

I have an onboarding page like this www.abc.com/ welcome. On continuing users land on /set-profile image page.
There is a Submit on this page.
When users click on Submit button, if the user has come from /welcome, I want users to go to the configuration page, else I want users to go to /home.
The issue I am facing is, I tried both window.location and use history but I can't figure out how to find the "from" location.
What I am doing wrong?
You can't access the browser history from JS (that would be a security issue).
What you can do is add a query string to your /set-profile route (such as ?returnTo=/welcome) and use it for the redirection.

how to prevent url navigation in ionic3

can anyone tell me how to prevent secure link navigation using app.component for. Eg:- when user hit url like this http:// localhost:8888/#/login he get login screen (login HTML) after that user press login button screen navigate to user screen but when user manual ly hit link like http:// localhost:8888/#/user, screen which user get is still same login but problem is that it call all user.ts file which I want to prevent if user not login not I m trying to achieve this through app
You can use ionic's lifecycle functions like ionViewCanEnter to perform security check and prevent unauthorised navigation - Source
Something like this in you User page:
ionViewCanEnter() {
return this.authService.authenticated();
}

PWA loses its params and query params after being added to the home screen

I have created a PWA(Progressive Web App) using Angular6. It works perfectly as expected in the browser. My scenario is to handle all the app data based on the params I get from URL
eg: https://<my-site.com>/app/abc123
where abc123 is my param which I need to add to the home screen app.
So the problem is when user adds the app to the home screen it loses all the params (I have tried using queryparams as well) and that leaves me only with the hostname. I need the whole URL to be added as the App URL. Can you please help.
Thank you for your time and help!
When you add a web app to your homescreen, the browser will check to see if there's a web app manifest.
If the manifest is present, the start_url field in the manifest will be used as the initial page when you open the web app.
If you need to customize the initial page, you'll need to change that start_url value in your web app manifest accordingly.

AngularJS routing /profile redirects to /profile/register when not logged in, browser history saves both routes

I'm facing a problem don't know how to solve. I would like to get some light here.
Given an AngularJS application that routes using the standard $routerProvider, and considering the fact that whenever an end user tries to access a private area he gets redirected to the register area, happens the following:
User just landed onto de application (didn't get logged in).
User goes to /profile
The application checks whether there is session info in the client or not.
The application redirects to /profile/register
User clicks on "Back" button of the browser and goes to /profile.
(Next step is number 3 again and again).
This happens because each time the application redirects using the $routerProvider, it pushes all routes in the browser history.
My question is, how can I jump the failed /profile access over the browser history? How can I tell the browser do not save this route under given conditions
like the user is logged in?
FAQ regarding history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Supposing you're using the $location built-in service to redirect, you can use $location.replace() to replace the current history entry:
if (notLoggedIn) {
$location.url( "/profile/register" );
$location.replace();
}
Note that this will apply to current digest only, as noted in the API docs.

cakephp acl admin redirect problem

I currently have a form where you put in two variables and on submit it redirects to a url like this:
http://example.com/deal_user_coupons/check_qr/$var1/4var2
but when logged in as admin it goes to:
http://example.com/albuquerque/admin/deal_user_coupons/check_qr/$var1/$var2
Which makes it show a 404 page.
I was wondering how to get rid of the admin directory slash. I tried looking in the documentation and at a few acl tutorials but nothing came close.
You can redirect form on the exact page you need using url option.
$this->Form->create('Shutk',array('url'=>array('controller'=>'my_controller',
'action'=>'my_action',
'admin'=>false)
)
);
don't forget to use in url array. this will remove admin prefix from action attribute of the form.
'admin'=>false

Resources