Nuxt.js自定义v-can权限指令绑定v-btn不生效如何解决

问题根源 #

Vue 自定义指令的钩子函数没有接收返回值控制元素状态的内置逻辑，你当前的写法仅完成了权限判断的计算，没有对绑定指令的DOM元素做任何显示/隐藏/移除处理，因此哪怕权限判断结果正确，元素也不会产生对应变化。

修复方案 #

修改plugins/permission.js的指令逻辑，在判断无权限时手动操作DOM：

import Vue from "vue";
export default function({ store }) {
  Vue.directive("can", function(el, binding) {
    const hasPermission = store.state.permissions.indexOf(binding.value) !== -1
    console.log(hasPermission)
    // 无权限时的处理逻辑，二选一即可
    if (!hasPermission) {
      // 方案1：仅隐藏元素
      el.style.display = 'none'
      // 方案2：直接从DOM中移除元素，避免被审查元素修改显示
      // el.parentNode?.removeChild(el)
    }
  });
}

额外注意事项 #

1. 上述写法用了Vue自定义指令的函数简写形式，会在bind（指令首次绑定到元素）和update（指令绑定值变化/所在组件更新）两个阶段触发，若store.state.permissions是异步更新的场景，也能自动刷新权限判断结果。
2. 如果绑定在Vuetify的v-btn等组件上不生效，可以在组件外层套一个原生DOM元素，把v-can绑定在外层元素上，避免组件根元素嵌套导致的操作失效。
3. 你当前配置了插件ssr: true，需要确保服务端渲染阶段store.state.permissions已经正确初始化，否则会出现服务端和客户端渲染结果不一致的hydration报错，若权限仅在客户端校验，可以把ssr配置改为false。

内容的提问来源于stack exchange，提问作者Stack Team