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

Vue-在组件上自动运行功能

1 个答案: