I currently have ionic/angular app that allows users to sign up as varying roles. Based on the role they sign up as I would like them to be redirected to a specific angular component. I have a signup form in my index.html file and the redirect logic in my script.js file however, I don't know how to write the redirect logic. In other words, how do I navigate to a specific component, based on the users role, from a javascript file?
You could load a 'dispatcher' component. And decide what to load next (based on users' role). This component can be smart enough to handle the logic.
Related
I am trying to learn to react front end by creating a simple frontend website. My goal is simple I want to implement a login menu when I run the app. The user will log in through this window and if the user is a regular user it will redirect the user to a new component call regular.js. If the user is admin then redirect the user to another page lets calls that admin.js. I have been trying to understand how to redirect in react. Like in javascript I can write if Credentials match then go to this page can I do that too in react? However, I do not want the user to log out automatically when the redirect happens. I am not sure how to approach it because I read other answers saying use hooks but then some said use routes as well. I am providing the App.js, index.js, and loginForm.js file underneath, any direction will be helpful or documents to refer to like guide me to do this will be helpful. I am not looking for a design or any content on the new pages I just want the redirect to work while the user is logged in.
You should not handle login on the front end with React states, there is 0 security in this. You should look into how to implement authentication, consider reading through some tutorials like this one: https://bezkoder.com/react-express-authentication-jwt/
Me and my team are trying to make a multi-page react app and each of us had been given one-one page to work on, for simplicity let us assume we have only 3 pages- I had to design login/sign-up, the other had to design the home page where the display information would be dynamically fetched from the API (let's call it the API page for simplicity).
I have made the login and sign up pages by keeping the HTML file as it is, and I have used react just to render the forms and perform form validation and account validation by hitting API in the backend in react, and I still need to call the /login.html page; whereas my friend has converted the whole HTML file into a react component, and he just renders the different components like sidebar, searchbar etc into one js file to display the webpage.
Which of the above is a better method to make a react webpage?
P.S- All the 3 pages are working absolutely fine independently.
How do we integrate all the 3 pages and also ensure that one is not able to access the API page unless and until he/she has logged in?
We are using webpack config to run our files.
I searched a lot in here, and i couldnt find an answer to the questions I ask myself. Here is the thing :
On one side , I want to have a static landing page (with login/sign up form ), and on the other side, I have an angular app that handles all the things related to the authenticated user. It's like that because my app is kind of "private", so users that cant register or login do not have to load the entire angular app and can't go further than the landing.
On the landing page, the login request hits on my API, and with the given credentials I store the user access token in the local storage, which allows him to do all the future requests inside the angular app.
What I want to do is to have the same URL for both the landing and the angular app. Let's say the base url is www.myproject.com, when I go to this url, depending on if i'm logged or not, i want to be redirected to the landing page or the angular app. It's also based on a "Remember me" checkbox.
So how do I do to share www.myproject.com between the landing and the angular app, depending on the user state ( logged or not ) ? Is it some kind of server routing ? Or can I achieved this with angular ui-router ?
It's only a matter of fanciness, i could also have urls like www.myproject.com for the landing, and www.myproject.com/app for the angular app, but the real problem here is how to do the logged/not logged based routing. If it simpler to explain with two differents urls, I'm interested too.
Thank you for your answers, i feel really lost here !
EDIT
Since ALL the requests inside the angular app need the access token, what if I catch 401 error that i might get from oAuth when entering the angular app, with an http interceptor ? Could I use this to redirect to my external landing page file ?
I don't really need the share of the root url between the landing and the app, all I want to know is : is catching 401 code a good way to redirect to the landing/login page ?
I wanted to know how people would go about having a sign in page for an Angular app that was completely separate from the app and once authenticated would be passed through into the main angular app. So something like a Signin.html page that once authenticated passed onto index.html.
The thing I can't get my head around is having the moules loaded into the main app on signin.html and how you then handle moving to index.html that has its own modules and whether you can pass user information between the modules on signin -> index.html.
The way my app currently works is a modal for sign in that is part of the main ng-app and simply has the app behind it.
One approach you may want to explore is, provided both pages are from the same origin (ex www.myapp.com/app) you may be able to store authenticated user information in local storage. Upon succesfull authentication, your signup page will save the user information in local storage using $localStorage and will direct the call to index.html. Your index will not have access to whatever stored by signup.html via local storage.
Both Derick Bailey and David Sulc are very conclusive at the time to have the Landing page and auth logic (+ login/signup forms) separed from the actual Marionette app. However, I haven't been able to find any example nor explanation of how should this be handled and thus, I have few doubts:
CHANGING THE INDEX.HTML
The index.html won't be loading the Marionette app anymore. This means that when loading example.com we will end up in a simple landing page even if the user is authenticated (localStorage has his token credentials stored). I understand that this simple landing should somehow handle that if the user has stored credentials, the user should be immediately redirected to a app.html that will actually load the Marionette app, with the users account and the initially accessed route. In other words:
The url fragment is stored.
Check if user is logged in
If the user is logged in, then load app.html which will load the app (how to load the app for a certain route?)
If the user is not logged in, then do nothing
LOGGING IN
In the case the user is not logged in and logs in. Independently of if index.html has the login form or we have redirected the user to login.html, our auth logic has to be independant of the app. This means login.html has to include a .js that will make an ajax call against out API.
User enters credentials
AJAX call to check credentials
If API returns token, then store credentials in localStorage and load app.html (which will load the marionette app)
SIGNING UP
The user signs up at /signup signup.html or index.html if this includes a sign up form. Whichever HTML is loaded, it must include the necessary js logic to make an ajax call to the API for a new user.
User enters new account data
Our independant js makes an ajax call to the API
If creation successful we store the data to localStorage and load app.html (which loads the app)
If not, we show errors
And you'll say I'm missing the question. My question is, are these workflows correct?
Which workflow do you normally use?
How do you structure this code inside the marionette app project folder?
If you know of any simple examples on github on how to approach this I'd be very happy to learn about them!
Well, in case someone stumbles upon this question, I finally decided to have the landing/auth logic inside the Marionette app. This way I keep my backend to be only an API REST, and I don't need of any further backend to serve me more pages.