Vue – 在创建的组件上自动运行功能

Question

我正在使用带有 TypeScript 类（.tsx 文件）的 Vue CLI 3.x。

我想为我的所有视图实现权限处理。

最简单的场景是：路由到组件 X；有访问权限吗？停留;没有权限？路由到默认页面。

我已经实现了正确处理所有事情的逻辑，但我在一个好的架构上苦苦挣扎。

现在我将受保护的处理函数添加到 Vue 组件 ViewBase，我的所有组件也是视图，继承这个类并在它们的 created() 生命周期钩子中调用这个函数。它看起来像这样：

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
class ViewBase extends Vue {
  protected handleAccess() {
    // route here
  }
}

@Component
class MyView extends ViewBase {
  private created() {
    this.handleAccess();
  }
}

但我不喜欢在我的每个组件中手动调用 created 钩子中的某些内容。我可以以某种方式自动化吗？

Answer 1

您可以使用Mixins (TypeScript)。

直接在 mixin 中的 created 挂钩中定义您的句柄访问代码，并为您的所有视图组件包含（或在 TypeScript 中扩展）此 mixin。钩子将被合并到您的视图组件中，就像您在视图组件中定义了钩子一样。

// mixin.ts
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
  created () {
    // handle access code
  }
}


// my-view.ts
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'

@Component
export class MyView extends mixins(MyMixin) {
}