What is the best practice for multiple user panels in Angular2 - javascript

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

Related

How to have same URL for home feed but also for login page if user is not logged in?

So I am working on a PERN stack app (postgresql, expressjs, reactjs, nodejs).
And I was wondering... How does facebook or instagram code the thing where, If I am logged in, the url: www.instagram.com shows my feed, but if I am not logged in, www.instagram.com shows the login page (without changing the url to something like instagram.com/login or similar...)
So my question is, how do they do this?
I have tried looking into solutions with react router, and couldn't find any :/...
I think this could be done by changing the state of the app but thats not how I would like to resolve the routing on my app.. (it's a social media kind of app)
As a general logical flow, I would suggest the following:
Define a home route i.e the app base url (/) such that it's a common route for both authorized and non-authorized pages. This should also be the root route component in the react-router.
Check user session/authentication in the home route as the first step:
If the user is authenticated, render authorized components and sub-routes eg: /profile, /account, etc.
Else, render public components which is usually the login/signup pages.
On logout, redirect the user back to home route (/).
This is a very high-level flow which is usually pretty much the same regardless of the stack you use.

User Portal for Specific Clients

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.

BIM360 App Store: How to recognize Account ID

Let’s say BIM360 admin has added my BIM360 app from BIM360 App Store to his/her BIM360 account, and gone through the provisioning steps.
After that, when user clicks ‘Open’ link (a sample shown in the screenshot), a page from my app will be opened.
In this page, I need to determine whether this particular BIM360 account already has a corresponding account in my app or not.
To clarify further, my app is a multi-tenant cloud-service, and each tenant/account is tied with a BIM360 account - not with individual BIM360 users. So, regardless of BIM360 user who logged into BIM360 page, I need to redirect him/her to the account corresponding to BIM360 account.
If no corresponding account in my app (which will be the case for first time access), I have to redirect user to 'sign up' page.
Question: how do I find the BIM360 Account ID when user opens my app via 'Open' link in BIM360 page?
One possible workaround (a hack, really) is to use ‘referrer’ in HTTP header (on my page) to grab the URL of BIM360 page, and scrape Account ID out of it.
What is the correct way to do this? Could you point me to a sample code?
Thanks
When the end-user opens your app you should ask to sign in with his/her Autodesk Account, which results in a 3-legged OAuth access token.
With that, your app can call GET Hubs, which returns the list of Hubs that user has access and your app also has access. As this includes all hubs, check for attribute.extension.type == hubs:autodesk.bim360:Account and the hub id will be the BIM 360 Account. You may also check the hub id with b. prefix.
Please note the Hub id has the b. prefix and you need to remove it to get the correct BIM 360 Account ID.
Finally, an end-user that comes to your app may have multiple BIM 360 Docs hubs provisioned to your app, e.g. a contractor that works with multiple projects, so consider that scenario.
Check this article for some other considerations.
EDIT
From comment (23/4/2018):
the workaround you suggested doesn't really solve the problem then. I need a way to figure out the BIM360 Account ID for the page where user clicked 'Open' link.
After the user clicks on "open", your app needs to ask for sign-in, which gives your app a 3-legged token. With that, call GET Hubs endpoint, filter hubs for BIM 360 Docs, if more than one, ask user to select the hub/account, then you have the account ID.

React Router - Nested Routes for Sidebar

I have a question regarding routing in a react client CMS app that I'm working on. We use react-router but this question has to do with routing in general.
While the user visits a page of a website, we have a drawer/sidebar which allows the user to manage basic entities of the website like pages, media, users etc. Currently we are using redux actions to show/hide elements in the page. We found this a little bit confusing and not very practical. We want to change that and to move this navigation functionality to the router. We use react-router of course.
We are thinking to add some additional routes to the app in order to keep the currently visible page in the url. For example consider that the user opens the app and visits a page:
#app/page/someflag
Now consider that the user wants to manage users:
#app/page/someflag/manage/users
In this case a sidebar/drawer appears with a list of the users and when we click to edit one of them we can have a route like:
#app/page/someflag/manage/users/edit/10
Do you thing these routes are ok? Any suggestions?

Angular2 Bootstraping two application one ofter other in same page

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.)

Categories