Question

我有一条指令，可以根据用户角色来控制用户可以看到哪些按钮：

import { store } from '../store/';
import * as types from '../store/types';

const hide = vnode => {
  if (vnode.elm.parentElement) {
    vnode.elm.parentElement.removeChild(vnode.elm);
  }
};

export const userRole = {
  update(el, binding, vnode) {
    const userId = store.getters[types.GET_USER_ID];
    const { value, modifiers } = binding;
    if (value.role) {
      if (Reflect.has(modifiers, 'manager')) {
        if (value.role[0] !== userId) hide(vnode);
      }
};

然后我将有一个像这样的按钮：

          <vue-button
            v-userRole.manager="{role: job.role}"
            @click.prevent.stop="e => payoutJob(job.id)"
          >
            Button Text
          </vue-button>

在加载用户指令之前，所有按钮将显示在页面上。因此，大量按钮在页面上闪烁。然后2秒后，仅显示两个按钮，因为这是他们有权查看的按钮。我该如何预防？

我至少希望在登录的用户与用户角色指令文件匹配之前，页面上不会显示任何按钮。

用户信息存储在位置存储，vuex中，并且每个加载页面的页面都会检查登录用户。

Answer 1

我以这种方式创建了它，这意味着这将一直发生-您的指令仅在创建HTML后才将其删除。对于最初没有创建的元素，您需要使用v-if或类似的元素。我可以看到两种方法来解决此问题，一种是对您所拥有内容的最小更改的变通方法，另一种是我认为更好的解决方案（但这当然取决于您）。

要解决此问题，请使所有按钮的样式为display:none，然后在指令中删除图元或清除样式（或更改类-但您选择实现它）。这样，至少按钮不会出现。

但是，我认为，更好的解决方法是使用userRole属性创建自己的组件。然后，该组件将进行您上面的检查（例如，通过计算属性），然后根据需要显示或隐藏该组件。

编辑

我快速运行了fiddle，以测试您正在做的事情的原理-只是将挂钩从update更改为inserted可能会解决。显然，您的代码将更加复杂，因此您的里程可能会有所不同;）。

Answer 2

我将重点介绍Vue实例-https://vuejs.org/v2/guide/instance.html-我想您可能会使用beforeCreate。

还有另一个想法，如Euan Smith所写，使用v-if并将正确/错误的加载权信息放入您的数据中（将其设置为false，并且在已知角色时将其设置为true）。

vue.js，如何在加载页面之前加载指令

2 个答案: