1

我正在使用带有 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 钩子中的某些内容。我可以以某种方式自动化吗？

4

1 回答 1

2

您可以使用Mixins ( TypeScript )。

created直接在 mixin的钩子中定义句柄访问代码，并为所有视图组件包含（或在 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) {
}
于 2019-04-04T13:18:28.697 回答