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.

<Can /> or condition

See original GitHub issue

Hi,

Versions used :

"@casl/ability": "^3.4.0",
"@casl/react": "^1.0.4",

New to casl React, I’ve set it up with my permissions model and rest services. I’ve used it on a first component successfully :

 <Can I="create" a="product">
        <Button variant="contained" className={classes.button} size="small" onClick={this.startCreation} data-cy="create-user-button">
              <AddIcon classes={{root: classes.iconThemeColorGreen}} className={classes.leftIcon} />
                   Create {this.componentName}
          </Button>
 </Can>

But now, I have a case where user can go on a product with one button and permission Read OR Edit.

How can I make it using usefull component <Can /> and without having to write a multiple test with ability.can || ability.can … and create a specific variable injected in my JSX afterwards ?

Thanks,

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

jkeruzeccommented, May 4, 2021

I have check and I did both world : it was a long time ago …

In ability:

  /**
     * Wrapper for simple ability can API
     * 
     */
    can(I, object) {
        if(Array.isArray(I) && I.length > 0) {
            return I.some(perm => {
             return this.ability.can(perm, object);
            });
        } 
        return this.ability.can(I, object);
    }
    
    /**
     * Wrapper for simple ability cannot API
     * 
     */
    cannot(I, object) {
        return !this.can(I, object);
    }

Use it : abilityServices.can([SecurityConst.permissionType.edit], this.props.form.formObject)

import { createCanBoundTo } from "@casl/react"
import abilityServices from "../../../services/security/AbilityServices"

export default createCanBoundTo(abilityServices.ability)

Then //Security import Can from '../../../../components/ui/security/CanControl'

and finally: <Can I={SecurityConst.permissionType.create} a={SecurityConst.permission.toolAdministration.module + "_" + SecurityConst.permission.toolAdministration.objects.user}>

0reactions

lasithagurugecommented, May 5, 2021

I have check and I did both world : it was a long time ago …

In ability:
  /**
     * Wrapper for simple ability can API
     * 
     */
    can(I, object) {
        if(Array.isArray(I) && I.length > 0) {
            return I.some(perm => {
             return this.ability.can(perm, object);
            });
        } 
        return this.ability.can(I, object);
    }
    
    /**
     * Wrapper for simple ability cannot API
     * 
     */
    cannot(I, object) {
        return !this.can(I, object);
    }
Use it : abilityServices.can([SecurityConst.permissionType.edit], this.props.form.formObject)

OR
import { createCanBoundTo } from "@casl/react"
import abilityServices from "../../../services/security/AbilityServices"

export default createCanBoundTo(abilityServices.ability)
Then //Security import Can from '../../../../components/ui/security/CanControl'

and finally: <Can I={SecurityConst.permissionType.create} a={SecurityConst.permission.toolAdministration.module + "_" + SecurityConst.permission.toolAdministration.objects.user}>

Thank you for your quick reply and sharing this. This is great! Cheers!