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

问题描述

我正在尝试将 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...？

感谢大家抽出时间帮助我:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）