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

Question

我正在学习使用 vue 进行 vue 授权 gates.I 使用 vue gates 在 nuxt 上进行授权时遇到问题。尽管根据经过身份验证的 user.when 从 api 获取正确的角色，但角色授权（指令）无法正常工作我刷新页面 v-role 指令设置的元素被破坏了。所以我希望有人了解如何解决这个问题，告诉我我缺少什么，并给我一些提示或信息来解决这个问题。

for api 我使用 laravel, laravel spatie 进行授权，这是 vue gates 自己推荐的。

所以让我向您展示我的代码。

组件：

<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-gates 的 persistent 功能。在您的配置文件中插入Vue.use(LaravelPermissions, { persistent: true });。这也适用于 nuxt.js.

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

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

Vue Gates Authorization not working as expected when page got Refreshed with refresh button

vue.js

nuxt.js