CASL Vue routes

abilities.js

import { AbilityBuilder, Ability } from 'casl'

// Alternatively this data can be retrieved from server
export default function defineAbilitiesFor(user) {
  const { rules, can } = AbilityBuilder.extract()
  
  can('read', 'User')
  can('update', 'User', { id: user.id })
  
  if (user.role === 'doctor') {
    can('manage', 'Patient', { treatedBy: user.id })
  }
  
  return new Ability(rules)
}

auth.js

import router from '...'
import defineAbilitiesFor from '...'
import currentUser from '...' // in real app this is retrieved from server

const abilities = defineAbilitiesFor(currentUser)

// conditional logic based on attributes and resources should be used in specific component template. 
// Take a look at https://github.com/stalniy/casl-vue-example/blob/master/src/components/TodoList.vue (i.e., $can usage)
// 
router.beforeEach((to, from, next) => {
  const canNavigate = to.matched.some(route => {
    return abilities.can(route.meta.action || 'read', route.meta.resource)
  })
  
  if (!canNavigate) {
    return next('/')
  }
  
  next()
})

routes.js

export default [
  {
    path: '/users/:id',
    component: UserProfile,
    meta: {
      resource: 'User',
    }
  },
  {
    path: '/patients',
    component: PatientList,
    meta: {
      resource: 'Patient'
    }
  }
]