Backbone application with different functionalities by role - backbone.js

I have a single page backbone application. It's essentially a list of items with some data associated with each. Right now, it's only visible to admin user and the edit, destroy links are present as well as a bunch of other "admin-only" features.'
If I want to make the page available to non-admin users and let them only see the items and maybe some admin features, would it be preferable to have a different sets of views, models, templates, another app of just hide depending on the user role?
Or maybe just another set of templates?

I would say the easiest and most maintainable solution would be to have a separate template for admin and non-admin users.
You should be able to use the same view, but the template will determine which functionality is enabled.
Again, there are multiple ways to solve this and it depends on the context, and in this context I think different templates is the best way.

Another simple approach could be to use the same template (same html) but toggling elements through CSS.
You can add/remove a class to the root DOM element of your template like .admin and play with CSS:
#my-root-element .admin-element {
display: none;
}
#my-root-element.admin .admin-element {
display: block;
}
Of course the elements will be still there for possible malicious users, but this shouldn't be a security issue because you always should have extra security filters in the server layer.

Related

Using abp-page-toolbar and abp-extensible-table

I am trying to use both components in my angular application. I am a backend developper and absolutely newbie in angular. I have been reading the roles and users components in the source code and I think I cloned it for my Customers component. I have guards, defaults and all the code like Roles and Users but, although the code compiles and the API call is done, I have nothing in the screen, only the Total records are displayed. No action buttons, no table rows, no pagination...
Is there anyone who has use these components and can bring me some help?
Many thanks
Those components are needed for customizing built-in modules. Let's talk about Users for example. The Users component is a built-in page and you do not have access to its code. However, you may still need to make some changes like adding a New User button on the toolbar or changing its columns, form fields etc. That's why ABP Framework provides some injection tokens to override/extend/customize these features. Since you are developing your own page, you do not need any of this. You can directly use ngx-datatable in your own component, add or remove columns and so on.

Approach on Loading angular JS templates for a multi tenant Application?

I have a SPA Angular Application. I need to hide or show certain sections of a particular template based on the Tenant ID of the logged in user. The problem is, Tenant A may want to hide some controls and add some extra attrbutes, where as Tenant B may have a altogther separate requirement on the same page.
I may end up writing lots of If else on the same template and may also need to modify controllers to handle conditions of various Tenants.If number of tenants increases, The solution becomes messier.
One more Approach is to introduce redundancy and make separate copies of templates for each Tenant and maintain a configuration mapping of tenant to Templates. This way code is segregated.but still Controllers would be same. If I duplicate controllers, Even test suite has to be duplicated and will take time if Test suite is ran for every tenant.
Can somebody give me a better approach, how can this be achieved in a optimal way ?

Can two ng-app coexist in the same page?

They way I understood it, it's better to use one module per functionality. For my demo application, I've create a module (with one, sometimes two controllers) for the user profile, cart, and product browsing.
Now that I've added the account and role management on the server side, I'm about to add a module as well that will deal with user's login and roles concern.
Knowing that login functionality will be required on almost all the pages, I'd like to know whether 2 modules can coexist on the same page?
On all my pages, there is no ng-controller directive, only ng-app="cartModule". I din't see anywhere code that uses more than one module.
For instance, after logging, I need userId to navigate to the cart page, profile page, product page, and so forth. So far, I've hard-coded the userId just to allow me to keep coding. The alternative would be to merge all the functionalities in one giant module.
Any idea about how to deal with common concerns?
When you declare a module, you can depend on other modules and have them made available as well:
angular.module('myModule', ['dataModule', 'someUiModule', ..., ])
So, do that.
You can have separate applications on the same page, but it doesn't really make that much sense to.
Yes, it is possible if you manually bootstrap angular:
angular.element(document).ready(function() {
var app1 = angular.module('app1',[]);
var app2 = angular.module('app2',[]);
... // Find the two DOM elements
angular.bootstrap(element1, ['app1']);
angular.bootstrap(element2, ['app2']);
});
In the HTML, make sure to remove all ngApp directives.

Role based views in extjs4 mvc

My application has different views for different roles like (admin or standard user).I don't know how can i implement it with extjs4 MVC. Examples of extjs4 documentation consider that application has only one role like standard user so they create one app.js file that manage application but if application has many roles i don't know how can i implement different views for different users.
One matter is i have two app.js files in the application and after i get user role in the server i load appropriate app.js file to use appropriate views,controllers,models,stores and so on.
Is this matter true?
This is a rather standard question that comes up so many times and the answer is always the same:
Access Control belongs to the Server where no user can manipulate it
Simply don't provide a View / a model / a controller to a user where he has no access to
With that in mind it doesn't matter if you have one app or ten.
And because Access Control is nothing that belongs to the frontend there is no implementation within ExtJS.
Update -> Hide UI elements
A ready to go approach would be the use of Ext.direct. This provide the application with a API that can be modified based on custom access of the current user and can then be checked by the frontend.
HowTo:
Create the API based on the user session and check on the Clientside like
if(Booking) {
if (Booking.Create) {
// has access
}
}
or as one line
{
xtype: 'button',
hidden: !(Booking && Booking.Create)
}
This is just a simple example how easy this could be done!
update
This Link helped the op

CakePHP - Only display a link if user (ARO) has permission for page?

I'm using CakePHP's ACL component to manage permissions for my app. I have about three different "Roles", with different access levels. I am using the HTML helper throughout, to create links to different pages. I would like links to only display if the user has permission to access the page.
The obvious but cumbersome approach, I guess, would be to set variables to the view containing permissions and show links based on these variables.
I was wondering if there is a better way - perhaps a helper that extends the HTML helper to provide a method that checks permissions first?
Thanks.
I wouldn't recommend to use a helper which has this sort of functionality.
This is because this helper would have to do the checking on every link you use on that page. This would slow down your application.
So I think the best approach is your approach. Set the permission on login and display your links accordingly.
We are using this in our application, too, and it works very good and fast.

Resources