Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📖 Update docs for TypeScript in Vue 3 using createMongoAbility #797

Open
jd-solanki opened this issue Aug 1, 2023 · 1 comment
Open
Labels

Comments

@jd-solanki
Copy link

Describe the bug
ATM, docs for Vue + TypeScript is out dated and uses old way of defining the Ability using Ability class however in docs it's recommended to use the createMongoAbility. I checked other page but it confuses more on what to do for adding typescript support in vue 3.

To Reproduce
Steps to reproduce the behavior:
n/a

Expected behavior
n/a

Interactive example (optional, but highly desirable)
n/a

CASL Version
n/a

Environment:
n/a

@jd-solanki jd-solanki added the bug label Aug 1, 2023
@hungify2022
Copy link

hungify2022 commented Oct 31, 2023

We have two approaches to implement.

  1. Use Object ability subject and action
import type { AbilityClass } from '@casl/ability'
import { Ability } from '@casl/ability'

export type Actions = 'create' | 'read' | 'update' | 'delete' | 'manage'

export type Subjects = 'Auth' | 'all'

export interface UserAbility {
  action: Actions
  subject: Subjects
}

const ability = new PureAbility<[Actions, Subject]>()

// update
ability.update([{
 action: "..."
 subject: "..."
}]); 
  1. Use AbilityBuilder to specify each rule
export type AppAbility = PureAbility<[Actions, Subjects]>
export function buildAbilityFor(roleId: number) {
  const { can, build } = new AbilityBuilder<AppAbility>(
    PureAbility,
  )

  if (roleId === Roles.Manager)
    can('manage', 'all')

  else if (roleId === Roles.Guest)
    can('read', 'Auth')

  return build()
}

// ability.ts
const ability = new PureAbility<[Actions, Subject]>()

// component.vue
const ability = useAbility()

 watchEffect(() => {
    const roleId = isAuthenticated.value ? Roles.Manager : Roles.Guest

    const { rules } = buildAbilityFor(roleId)

    ability.update(rules) 
  })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants