I am working on a project in angular2. It has two part, first part is login and other is dashboard. I want to develop login part in one app and the dashboard part in other app.
The problem is, I cant not load dashboard app after login app in same page.
I found a link in which they Bootstrap two application in same page, But I want to load one app at the time in same page.
The link in which they Bootstrap two app in same page is:
Bootstrapping multiple Angular 2 applications on the same page
Main purpose for doing so: Security
Suppose the user wants to log in, I want the Dashboard app get bootstrapped by Angular2 separately.
Why I'm not using separate components is because I don't want to expose other components that are loaded along side the Login component.
I see two main options here (I'm sure there are others):
Option 1: Separate apps for login and dashboard
You could make your login and dashboard app each have their own urls, e.g. https://myhost:1234/login and https://myhost:1234/dash.
When users try to go to /dash, the server checks if they are logged in, and redirects to /login if they are not. When users log in through /login, the server sets up the session, then redirects to /dash.
Option 2:
Use a guard on the router, that prevents the user from navigating to dashboard unless they are logged in.
See the TempHire Sample Application for an example using guards. In this example, the guard performs an ajax call to the server, and uses the response to determine whether to proceed. (The response also brings the Breeze metadata to the client, but that's because it's a Breeze app.)
Related
This is a hypothetical question, so let's say you've got a full-stack web application and there is admin-dashboard in the front-end side.
I, as /NOT/ admin, try to access a route such as /api/admin/dashboard
In the React app, some authentication logic can be done such as if user.isAdmin allow to dashboard else navigate back to homepage
In the back-end side, let's say Node.js, you just res.send('not authorized')
So what I thought is I'm on the client side right, I can take minified js which is derived from npm build of React app, and I don't know but somehow I can revert it back to React App folder structure then there is all the util files, components, hooks and everything.
That means I can manipulate authentication logic like allow everyone to see dashboard and also manipulate the fetching logic that would be if error from fetching, instead of return 'not loaded', compeletely remove fetching logic to the backend and just see me dashboard
So, to my understanding, after some effort, maybe not data and functionality that requires me to speak to backend, i can see dashboard or even all the layout, right?
My question is, can we prevent this to happen in some way?
Or do I need to?
First, As you have use role based conditional dashboard render in frontend, When a non admin user inspect the app and figure out the admin dashboard route, when ever the person visit the page, if any api is giving 401 unauthorized status, then logout or redirect that person to actual page. For a millisecond he will able to see the page.
or
Second, Send your react routing as json from backend api. Backend is way more secure. It will send conditional role base route to react. So, no user can figure out actual route path from frontend any more. So, It is more secure.
I recently started learning react now I come to know that Facebook, Instagram and many more use react as frontend, but my question is when we go to instagram.com it give as page which behave as react spa but when we click on login it reload the page so how it is possible, how I can go to server while using react spa.
for Example:- if we take example of Instagram, if you first open Instagram page it behave as spa but when we fill form and click on login the page start reloading why?
You can use several modules like axios or fetch to send the request from your client-side react application to the server. And you can redirect to the route according to the server responses.
Although a hard redirection (which causes the page to reload) is not recommended in a Single page application (SPA), you might wanna use react-router-dom for the same.
Here you can find the default ajax request sample provided in react documentation.
The link for axios library.
I need some back end assistance here.
We're building a portal and upon login the user will be navigated to the appropriate landing page where they may find certain files they have subscribed for.
We've been looking at React, Node, Mongo, and Keystone to build this out.
I'm curious to see how one would be able to manually add users and passwords in keystone that would allow them to login initially and be directed to an appropriate landing page.
Thanks!
you could manage this in the state of your application. I can't speak on Keystone but think of it like this.
Keystone has your auth information for users which is tied to a users document in your mongo database. Once a user is logged in / auth'd you can pull the user data in via an api request and then route based on the response at the app level.
We do this currently with redux, react, and a postgres database to route users to pages based on the company they are assigned to.
You can create the user in your model, then you need to implement a custom login page, not the one that keystone provides by default since that automatically will redirect to you to the admin panel.
I think a way of achieve this is implement a custom login page, then in your controller, if the login is successful you can redirect that user to a route defined in the user model.
I will start with a new large project. I will use Angular2 but I don't know what is the best practice for a project that includes multiple user panels. I need your experiences and advice.
The project will have a landing page. On the landing page also will be a login form. If user information (username-password) are correct the user will be redirected to the panel as the type of the user. If the user an administrator, will be redirected to Admin Panel (dashboard), if not will be redirected to User Panel.
My question is:
What is the best practice to build such kind of project?
Each panel and the landing page as a separate Angular App
localhost (landing page app)
localhost/admin (admin panel app)
localhost/user (user panel app)
Or
All in one Angular App that includes landing page and other user panels in it
localhost (one app with all features)
This project will have many user types (admin, student, teacher, parent for now) and each type will have a panel with absolutely different features.
You can define your routes with the router, and you can use a guard to assign to these routes.
The guard can implement the logic you need for your several user roles.
The basic example is a guard for a route that activates only if the user is logged in. You can go further and then define your roles with a service and then guard your routes depending on the user role from the service.
The official documentation is pretty good : https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard
I was trying to find if ember.js has some or the other way we can redirect from one app page to another while maintaining some state data, like active routes.
(Not a single page app)
I'm in app A, route 3.
Now I'd like to redirect to another page, that contains app B.
I'd also like to maintain info, informing app B, that I am comming specifically from route 3, in app A.
Hope that makes some things clear.