CODEWITHSUNDEEP
vue.jsvuejs2vue-componentcasl
FindL
FindL

Reputation: 531

casl - can() returns null after reloading (F5) page

I'm trying to setting up CASL permissions system into my VueJS 2 project. All works fine, until I intentionally refresh (Like F5). All can() returns false even if my user have the abilities.

router / index.js :

router.beforeEach((to, _, next) => {
  const isLoggedIn = isUserLoggedIn()
  if (!canNavigate(to)) {
    // Redirect to login if not logged in
    if (!isLoggedIn) return next({ name: 'auth-login' })
    // If logged in => not authorized
    return next({ name: 'misc-not-authorized' })
  }

  // Redirect if logged in
  if (to.meta.redirectIfLoggedIn && isLoggedIn) {
    const userData = getUserData()
    next(getDashboardRoute(userData ? userData.role : null))
  }

  return next()
})

canNavigate(to) function :

export const canNavigate = to => ability.can(to.meta.action || 'read', to.meta.resource)

user abilities (from localStorage) :

User abilities

route configuration :

export default [
      {
        path: '/route-test/',
        name: 'route-test',
        component: () => import('@/views/TestRoute.vue'),
        meta: {
          resource: 'ADB',
          action: 'read',
        },
      },
    ]

So, canNavigate returns false, and I'm getting a Maximum call stack size exceeded error but, this is normal due to the "infinite" loop with in my beforeEach router function...

Why do my canNavigate returns false... after refresh?

Thanks to everyone give time to help me :)

Upvotes: 1

Views: 699

Answers (1)

Caio Santos
Caio Santos

Reputation: 1

I'm facing the same issue with a Vue 2 project - everytime i refresh the page the $ability instance gets reseted to its default value (before the .update() is called). Idk what's the root cause of the problem, but what i made solves the problem for now: I update the $ability instance each time the entry point component (in my case Home component) is mounted(). Idk if it is a good solution, but worked for me (if anyone knows a better way to do it please let me know).

Upvotes: 0

Related Questions