question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Role Based Component

See original GitHub issue

Issue Description

``

I’m submitting a…

Current behavior

Hi Alex,

I am happy to use your library in project! Could you help me please with one question?

<myComponent  *ngxPermissionsOnly="'ADMIN'; authorisedStrategy: disabledFunc; unauthorisedStrategy: enableFunc">
         </myComponent>
 public disabledFunc(templateRef: TemplateRef<any>) {
            // I want the button in the component to disable. What should I do?
        }
@Component({
 selector: 'myComponent',
template: `
        <h2>{{title}}</h2>
        <button> <div>123</div></button>
`} 

I want the button in the component to disable. What should I do?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
cubet-rahulcommented, Nov 12, 2018

@AlexKhymenko I have three roles: ADMIN, MANAGER, and USER. Each roles has a set of permissions. So I am setting three roles with their permissions like below and I want to display the link only if the ADMIN or MANAGER logged in. How can I implement that in angular 6?
NgxRolesService .addRoles({ ‘USER’: [‘canReadInvoices’], ‘ADMIN’: [‘canReadInvoices’, ‘canEditInvoices’, ‘canUploadImages’], ‘MANAGER’: [‘canEditInvoices’], }); <a *ngxPermissionsOnly=“[‘canEditInvoices’]” href=“#” data-toggle=“modal” (click)=“edit(id)”>Edit

I cannot see any example which shows how set permission based on a role. Please help.

2reactions
yd021976commented, Jan 19, 2019

Hi, if I can help :

  • If you use “roles”, then use in your template the role name to check permissions e.g, according to the @cubet-rahul code sample: <a *ngxPermissionsOnly="['ADMIN']" href="#" data-toggle="modal"></a> This will allow “ADMIN” role only, but all permissions of ADMIN role

  • If you use “permissions”, then use “permission name” in your template e.g, according to the @cubet-rahul code sample: <a *ngxPermissionsOnly="['canEditInvoices']" href="#" data-toggle="modal"></a> this will allow users that have “canEditInvoices”, no matter of their roles

In addition, if this doesn’t fit your needs, you can provide a validation function when defining role and/or permission. Example: NgxRolesService.addRole('ADMIN",()=>{ check whatever you want and return boolean })

Hope it helps

Read more comments on GitHub >

github_iconTop Results From Across the Web

Displaying components based on the role of a user
This article demonstrates how we can show or hide certain parts of the application if a user has the right to see it...
Read more >
What Is Role-Based Access Control? Definition, Key ...
Role -based access control (RBAC) ensures that only authorized users can access objects and perform operations. Learn how you can leverage ...
Read more >
Understanding the role-based component - Packt Subscription
In a sample organization that has accounting, sales, and manufacturing—you may split content into three security groups, one for accounting, one for sales,...
Read more >
Public, private, and role-based routes in React
role -based access on routes, role-based access on navigation, multiple roles support, nested routes support, nested routes support with permission.
Read more >
React - Role Based Authorization Tutorial with Example
The role object defines the all the roles in the example application, I created it to use like an enum to avoid passing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found