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

Question

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

Answer 1

在登录后就应该把该用户的所有权限查询过来，然后进行缓存，需要判断的地方就可以从缓存中直接查询

Answer 2

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

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

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

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

// 假设你有一个用于管理权限的Vuex storeconst 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 storeexport 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状态，指令可以知道何时开始检查权限。

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