如何在nuxt中使用casl-vue而不刷新页面

如何解决如何在nuxt中使用casl-vue而不刷新页面

我尝试在 Nuxt 中使用 casl-vue 进行授权。 一切正常，但只有在刷新后。

我使用自己的文件作为插件

plugins: ['@/plugins/roles'],

我的 roles 文件

import Vue from 'vue'
import { Can,abilitiesPlugin } from '@casl/vue'
import { defineAbility } from '@casl/ability'
Vue.component('Can',Can)

export default ({ $auth }) => {
  let abilities = defineAbility((can) => {
    console.log('s'+$auth.loggedIn)
    if ($auth.loggedIn) {
      $auth.user.permissions.forEach((permission) => {
        can(...permission)
      })
    }
  })
  Vue.use(abilitiesPlugin,abilities)
}

我在登录前检查了 $auth.loggedIn，它是 false。 我尝试在中间件中检查它，它在那里 true 但它在插件中不起作用。

在登录页面，我在登录后手动将 $auth.loggedIn 更改为 true 但它仍然不起作用。
我该如何解决这个问题？

解决方法

export default function ({ $auth }) {
  const isLogin = $auth.loggedIn
  const abilities = defineAbility((can) => {
    if (isLogin) {
      const user = $auth.user
      can(user.permissions)
    } else {
      can([])
    }
  })

  Vue.use(abilitiesPlugin,abilities)
}