Access Control (ACL)

Overview

Vuexy uses the CASL (opens new window) package to provide access control. CASL is future-oriented and is more detailed on Access Control.

We suggest you read the CASL (opens new window) documentation to learn how it works.

CASL may look complex at first so please make sure you first read their docs carefully and understand the base logic of Access Control to proceed further.

Config

You can find CASL configuration in src/configs/acl.ts.

We have defined two roles admin & client and their actions in the configuration file.

You'll have to update these roles & actions according to your application requirement.

const defineRulesFor = (role, subject) => {
  const { can, rules } = new AbilityBuilder(AppAbility)

  if (role === 'admin') {
    can('manage', 'all')
  } else if (role === 'client') {
    can(['read'], 'acl-page')
  } else {
    can(['read', 'create', 'update', 'delete'], subject)
  }

  return rules
}

Component

To define an accessible component use acl method with action & subject properties like shown below.

You can also refer full-version/src/pages/acl/index.tsx file for implementation.

const Component = () => <h1>Component</h1>

Component.acl = {
  action: 'read',
  subject: 'component'
}

export default Component

Navigation

Define the action & subject properties in navigation file to show/hide the navigation links/groups based on user role.

Refer to the example below:

{
  path: '/acl',
  action: 'read',
  subject: 'acl-page',
  icon: 'tabler:shield',
  title: 'Access Control'
}

Home URL

You can find home URL based on user role in src/layout/components/acl/getHomeRoute.tsx file. Currently, we have set default URL for client and admin like following:

How to remove ACL

It is quite easy to remove access control from the template.

1. Remove the src/configs/acl.ts file

2. Remove the import type { ACLObj } from 'src/configs/acl' import statement & acl?: ACLObj from next.d.ts file if next.d.ts file is present in your project.

3. Remove the src/@core/components/auth/AclGuard.tsx file

4. Remove the AclGuard wrapper & ACL related imports from src/pages/_app.tsx file.

   Change following code from:

   // Code before removing ACL Guard
   import { defaultACLObj } from 'src/configs/acl'
   import AclGuard from 'src/@core/components/auth/AclGuard'
   
   const aclAbilities = Component.acl ?? defaultACLObj
   
   <AclGuard aclAbilities={aclAbilities} guestGuard={guestGuard} authGuard={authGuard}>
     {getLayout(<Component {...pageProps} />)}
   </AclGuard>
   

   to

   // Code after removing ACL Guard
   {getLayout(<Component {...pageProps} />)}
   

5. Remove the acl method from all the components.

   Component from:

   const Component = () => <h1>Component</h1>
   
   Component.acl = {
     action: 'read',
     subject: 'component'
   }
   
   export default Component
   

   to

   const Component = () => <h1>Component</h1>
   
   export default Component
   

6. Remove action & subject properties if defined in your navigation files.

   Navigation object from:

   {
     path: '/acl',
     action: 'read',
     subject: 'acl-page',
     icon: 'tabler:shield',
     title: 'Access Control'
   }
   

   to

   {
     path: '/acl',
     icon: 'tabler:shield',
     title: 'Access Control'
   }
   

7. If you want to remove the ACL while preserving auth, and redirect Home URL to any URL, please modify the src/pages/index.tsx file like the following and update your redirection URL:

   import { useEffect } from 'react'
   import { useRouter } from 'next/router'
   import { useAuth } from 'src/hooks/useAuth'
   import Spinner from 'src/@core/components/spinner'
   
   const Home = () => {
     const auth = useAuth()
     const router = useRouter()
   
     useEffect(() => {
       if (auth.user && router.route === '/') {
         router.replace('/dashboards/analytics')
       }
     }, [auth.user, router])
   
     return <Spinner sx={{ height: '100%' }} />
   }
   
   export default Home
   

   OR

   Render your component in src/pages/index.tsx file for the Home page like following:

   const Component = () => <h1>Component</h1>
   
   export default Component
   

8. Remove the ability & ability.can function in all the CanView files in src/layouts/components/acl folder.

   If you want to remove ACL functionality and preserve Auth then replace the following codes in respective files.

   Replace the following codes in respective files in order to remove both Auth and ACL functionality.