# How to add ACL in starter-kit


We suggest you first check out "Understanding Authentication and ACL" article.

# Add CASL

First of all, import and use ACL plugin in main.ts file.

// main.ts

import ability from '@/plugins/casl/ability'
import { abilitiesPlugin } from '@casl/vue'

// other code

app.use(abilitiesPlugin, ability, {
  useGlobalProperties: true,

Make sure to configure @/plugins/casl/ability.ts according to your usage later.

# Add route protection

To add route protection, we need to leverage vur-router's beforeEach (opens new window) navigation guard.


Make sure router.beforeEach is after you declared router const and before you export router. Please refer to full version if you have any query.

import { isUserLoggedIn } from './utils'
import { canNavigate } from '@layouts/plugins/casl'

router.beforeEach(to => {
  const isLoggedIn = isUserLoggedIn()

  if (canNavigate(to)) {
    if (to.meta.redirectIfLoggedIn && isLoggedIn)
      return '/'
  else {
    if (isLoggedIn)
      return { name: 'not-authorized' }
      return { name: 'login', query: { to: to.name !== 'index' ? to.fullPath : undefined } }

Next, we will also have to add "Not authorized" page to redirect users who don't have enough abilities to visit the specific page. You can copy this page from full version and paste in exact same location as full version (under pages directory).

We are done with route protection. 🥳

Now, you can add action & resource as route meta and ACL will work as expected. For more details please refer to Router protection section in ACL guide.

# Showing/Hiding Navigation Item

Please refer to detailed guide on this page.