Vue - 创建组件的自动运行功能

Question

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

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

最简单的方案是：路由到组件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();
  }
}

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

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) {
}