Vue v-if resolve Promise - 在 Vue 中实现 Laravel Gate

Question

我正在尝试在 Vue 中实现 Laravel 的授权和策略，方法是实现一个向后端控制器发送 GET 请求的 mixin。

问题是 v-if 指令正在接收 Promise，这显然无法解决

下面是我正在尝试做的一个非常简化的版本：

全局混合，auth.js

import axios from "axios"

export default {
    methods: {
        async $can (permission, $model_id) {
            let isAuthorized = false;

            await axios.get(`/authorization?${permission}&${model_id}`)
            .then(function (response) {
                isAuthorized = response.data.isAuthorized
            })
            .catch((error) => {
                isAuthorized = false;
            });

            return isAuthorized;
        }
    }
}

主入口文件，app.js

import Auth from '@/auth';

Vue.mixin(Auth);
...
new Vue({...})

组件.vue

<template>
    <div>
        <div v-if="$can('do-this', 12)">
            Show Me
        </div>
    </div>
</template>

<script>
export default {}
</script>

有没有办法在 v-if 中“等待”异步 $can 操作？还是我从一个完全错误的方向接近这个？

Answer 1

你不需要 async/await 因为 axios 返回一个承诺。我认为您可以从创建的钩子中调用该函数。不要返回值，而是更改相关的数据属性，并在 v-if 中使用它，如下所示：

<div v-if="permissions['do-this__12']">

data() {
  return {
    permissions: {
      'do-this__12': false,
      'or-this__13': false,
    },
  }
}

methods: {
  getPermissions() {
    for (const key in this.permissions) {
      this.can(key.split('__')[0], key.split('__')[1])
    }
  },
  can(permission, model_id) {
    axios.get(`/authorization?${permission}&${model_id}`)
      .then(response => {
        this.permissions[`${permission}__${model_id}`] = response.data.isAuthorized
      })
      .catch(error => {
        this.permissions[`${permission}__${model_id}`] = false;
      });
  },
}
created() {
  this.getPermissions();
}

我没有尝试我的代码，如果失败，请告诉我。顺便说一句，将此实现提取到 mixin 将是一个更好的主意。如果您喜欢这样做，只需将“权限”对象留在组件中，然后将其他所有内容移至 mixin。

但当您需要多次 API 调用以获取权限时，这种方法无效。这就是为什么我认为您应该将整个权限对象传递给后端并在服务器中进行工作：

iPreferThisBecauseOfSingleAPICall() {
    axios.get(`/authorization`, this.permissions)
         .then(({ data }) => this.permissions = data)
}

// AuthorizationController

public function index(Request, $request)
{
   $permissions = [];

   foreach($request->all() as $permission) {
     // run your backend code here
   }

   return $permissions;
}

最后一点，最好不要每次都请求权限，而是一次性加载所有权限。