Question

这是我的代码

<button v-if="$can('permission-a')">Add User</button>
<button v-if="$can('permission-b')">Add Employee</button>

这是我的$ can方法

data() {
  return {
    returnAccess: false
  };
},

methods: {
  $can(permissionName) {
    let route = window.routes.permission;
    let returnAccess;

    axios
      .get(route + `/${permissionName}`)
      .then(resounse => {
        if (resounse.data == 101) {
          this.returnAccess = true;
        }
      })
      .catch(error => {
        this.returnAccess = false;
      });

    return this.returnAccess;
  },
}

$ can方法对于添加用户按钮返回false，对于添加员工按钮返回true。但是添加用户按钮也会显示出来，因为添加员工按钮的真实回报。

我该如何解决此问题。有人可以帮助我吗？预先感谢。

Answer 1

首先，您不需要返回值

创建权限对象：

data() {
return {
  permissions: {}
};

和类似的方法：

methods: {
$can(permissionName) {
  let route = window.routes.permission;
  let returnAccess;
  axios
    .get(route + `/${permissionName}`)
    .then(resounse => {
      if (resounse.data == 101) {
        this.permissions.permissionName = true;
      }
    })
    .catch(error => {
      this.permissions.permissionName = false;
    });
},
}

现在在您created（）中进行讲解

created() {
let permissionNames = ['a', 'b'];
        permissionNames.forEach(function(permissionName) {
            this.$can(permissionName) {
        });
}

这样，您将使用键作为许可创建对象。现在在html中，您可以轻松做到：

<button v-if="permission.somePermission">Add User</button>
<button v-if="permission.somePermission">Add Employee</button>

注意：未经测试，但希望您能理解

Vue JS如何从一个函数中检查多个v-if条件在同一页面中返回

1 个答案: