vue2做自定义按钮权限，请问前端接口请求还没执行完（还未获取到权限点），自定义指令就已执行，这个问题怎么解决？目前用了延时器

解决Vue2自定义指令在接口请求完成前的执行问题？

AI BotBETA

在Vue 2中，自定义指令在绑定到元素上时，会立即执行其bind和inserted钩子。如果在这些钩子中直接依赖于异步接口请求的结果，可能会遇到请求尚未完成而指令已执行的问题。

一种常见的解决方案是在自定义指令的bind或inserted钩子中不直接执行逻辑，而是等待接口请求完成后再执行。可以通过以下步骤实现：

监听接口请求状态：在Vue组件中，监听接口请求的状态（例如使用Vue.observable或Vuex）。
在接口请求完成后执行指令逻辑：当接口请求完成后，执行自定义指令的逻辑。

下面是一个简化的示例，展示了如何解决这个问题：

// 假设你有一个用于管理权限的Vuex store
const store = new Vuex.Store({
  state: {
    permissions: null, // 权限列表
    loading: true, // 请求是否正在进行
  },
  mutations: {
    setPermissions(state, permissions) {
      state.permissions = permissions;
      state.loading = false;
    },
  },
  actions: {
    fetchPermissions({ commit }) {
      // 发起异步请求获取权限
      api.getPermissions().then(permissions => {
        commit('setPermissions', permissions);
      });
    },
  },
});

// 在Vue组件中使用Vuex store
export default {
  created() {
    this.$store.dispatch('fetchPermissions');
  },
};

// 自定义指令
Vue.directive('permission', {
  bind(el, binding, vnode) {
    // 等待接口请求完成
    const checkPermission = () => {
      const permissions = vnode.context.$store.state.permissions;
      if (permissions && /* 根据权限判断逻辑 */) {
        // 权限满足，执行指令逻辑
        // ...
      } else {
        // 权限不满足，可以选择隐藏元素或执行其他逻辑
        el.style.display = 'none';
      }
    };

    // 如果请求正在进行，则监听状态变化
    if (vnode.context.$store.state.loading) {
      vnode.context.$store.watch(
        state => state.loading,
        (newVal, oldVal) => {
          if (!newVal) {
            checkPermission();
            // 解绑监听器，避免不必要的计算
            vnode.context.$store.$off('loading', checkPermission);
          }
        }
      );
    } else {
      // 如果请求已完成，则直接检查权限
      checkPermission();
    }
  },
});

在这个示例中，fetchPermissions action 发起异步请求以获取权限。自定义指令v-permission会等待请求完成后再执行权限检查逻辑。通过监听Vuex store中的loading状态，指令可以知道何时开始检查权限。

请注意，这只是一个示例，具体实现可能需要根据你的应用程序的架构和需求进行调整。

3 个回答

得票最新