使用刷新按钮刷新页面时，Vue Gates授权未按预期工作

Question

我正在学习使用vue-gates的vue授权。我在使用vue-gates对nuxt进行授权时遇到了问题。角色授权(指令(工作不正常，会基于已验证的用户从api获取正确的角色。当我刷新页面时，设置的v-role指令元素被销毁。所以我希望任何人都能理解如何解决这个问题，告诉我我缺少了什么，并给我一些提示或信息来解决这个问题。

对于使用laravel的api im，vue自行推荐使用laravel-spatie进行授权。

让我给你看看我的代码。

组件：

<template>
<div class="container">
<button v-role="'Admin'">TEST</button> //the directive,this should be displayed but destroyed when page got refreshed. 
</div>
</template>
<script>
export default {
async asyncData ({ $axios, $gates }) {
const [roles, permissions] = await Promise.all([
$axios.$get('/api/admin/roles'),
])
$gates.setRoles(roles)
console.log(roles)//printing ['Admin'] on console which is correct
}, 
}

v-role指令无法正常工作。还是我错过了什么？提前感谢

Answer 1

您可以使用vue门的persistent功能。在配置文件中插入Vue.use(LaravelPermissions, { persistent: true });。这也适用于nuxt.js.

https://github.com/williamcruzme/vue-gates/issues/15#issuecomment-594624573