Блог

Я использую 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();
  }
}
  

Но мне не нравится вызывать что-то в созданном хук вручную в каждом из моих компонентов. Могу ли я как-то это автоматизировать?

Вы можете использовать микшины (TypeScript).

Определите свой код доступа к дескриптору в created хуке непосредственно в микшировании и включите (или расширьте в TypeScript) это микширование для всех ваших компонентов представления. Перехват будет объединен с вашими компонентами просмотра, точно так же, как если бы вы определили перехват в компонентах просмотра.

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