Change behaviour based on user permission

#1

Hello!

We are building an app for educational institutions and are new to Ionic. The app helps Students, Teachers, Parents and Administrators to be more productive on the go.

Students interact with the app to see their enrollment courses, grades, student-id, contact details, notifications, fee status, assignments, class schedule and such

Teachers keep track of students attendance, assignments, class schedule, meetings and such

Parents keep track of grades, fee payment, notifications, teacher-parent discussion and such

Administrators can see overall administration of school, helpdesk tickets, send notifications, payment reminders and such

Since the functionality is different, we initially wanted to build 3 separate apps. But that comes with overhead of maintaining multiple code bases.

Is it possible to use one app and change the UI behaviour based on the login credentials and the role dynamically?

Happy to share more details if it helps for a better answer.

Thanks!

#2

Yes, you can definitely do this. You could create a completely different set of components for each of the different “roles” if you want, and as long as you lazy load them it won’t impact the overall performance of the application (it will result in an increased bundle size).

Of course, this allows you to create separate UIs for each role, you would need to make sure that security is handled properly on the backend and that only data the user should have access to is ever pulled in. Any code you include in the front end of the application will be accessible/viewable to anybody determined enough to find it.

#3

Thanks Josh for the response and I’m absolutely glad that this is possible!

We plan to use ionic 4, so we will absolutely use lazy loading.

Could you please elaborate on the above? How would someone be able to do this?

We will have a JWT token passed to the backed to enforce “roles”. So every request will be authenticate and data security enforced. I’m still not sure how the role is enforced to display the UI yet to change the behaviour, but im sure we will figure it out.

#4

You can use route guards to softly prevent access to particular routes based on permissions, but this should be used more for the user experience rather than security.

The main point is to keep any sensitive data out of the front end code. If you’re authenticating requests and only pulling in data that the user is allowed to see then that’s good. This way it doesn’t matter if a user “hacks” their way into a view they are not supposed to see, because it wouldn’t contain anything useful.