如何在next中使用casl- value而不刷新页面

Question

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

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

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

myrolesfile

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