向 Vue typescript 组件添加自定义组件级属性答案

【问题标题】：Add custom component-level property to Vue typescript components向 Vue typescript 组件添加自定义组件级属性
【发布时间】：2021-12-05 18:47:29
【问题描述】：

我在我的 vue2 项目中使用vue-class-component（和vue-property-decorator）。我想在加载每个组件时将组件级安全检查合并到每个组件中。我设想这样的签名：


@Component
@Security('USERS_LIST')
export default class UserList extends Vue {
...
}

在内部，传递的参数 (USERS_LIST) 会根据一些 Vuex 存储进行检查，如果失败，则使用 Vue-Router 通知或重定向用户。我可以处理所有的接线，但我对如何创建组件级装饰器或自行扩展现有的 @Component 装饰器有点迷茫。

我觉得我可以使用mixin 来覆盖生命周期方法并检查安全方面的状态。但是如何定义 @Security 装饰器，并为每个组件提供一个值？

【问题讨论】：

标签： typescript vue.js vuejs2 vue-component

【解决方案1】：

我已经有了使用mixins 的想法。我对这个解决方案不太满意，但它现在有效。这实现了从 created 生命周期挂钩调用的检查以验证权限。失败时，它会重定向到“权限被拒绝”页面。

当然，这只是一个 SPA 解决方案，实际的安全性是在 API 级别执行的。

securityVue.ts：

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

@Component
export class SecurityVue extends Vue {
  protected requiredPermission: string = null;

  public created() {
    // Check that we have permission
    if (this.requiredPermission && !this.hasPermission(this.requiredPermission)) {
      this.$router.push({ path: '/Error/NoPermissions', params: { permission: this.requiredPermission }});
    }
  }

  private hasPermission(permission: string): boolean {
    return true;
  }

}

每个组件：

export default class UserList extends mixins(SecurityVue) {
  protected requiredPermission: string = 'USER_LIST';

【讨论】：