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

Question

我尝试在 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登录后，但仍然无法正常工作。
我该如何解决这个问题？

Answer 1

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