casl - can() 在重新加载 (F5) 页面后返回 null

Question

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):

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:)

Answer 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).