1

我正在尝试将 CASL 权限系统设置到我的 VueJS 2 项目中。一切正常，直到我故意刷新（如 F5）。即使我的用户有能力，所有 can() 都返回 false。

路由器/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) 函数：

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

用户能力（来自 localStorage）：

用户能力

路线配置：

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

因此，canNavigate 返回 false，并且我收到了最大调用堆栈大小超出错误但是，这是正常的，因为我的 beforeEach 路由器函数中的“无限”循环......

为什么我的 canNavigate 刷新后返回 false...？

感谢大家给我时间帮助我:)

4

1 回答 1

0

我在 Vue 2 项目中遇到了同样的问题 - 每次我刷新页面时，$ability 实例都会重置为其默认值（在调用 .update() 之前）。我知道问题的根本原因是什么，但我现在解决了这个问题：每次安装入口点组件（在我的情况下是 Home 组件）时，我都会更新 $ability 实例。如果这是一个很好的解决方案，但对我有用（如果有人知道更好的方法，请告诉我）。

于 2021-11-18T18:32:21.713 回答