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

Posted 2023-02-16

【中文标题】向 Vue typescript 组件添加自定义组件级属性

【英文标题】：Add custom component-level property to Vue typescript components

【发布时间】：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 装饰器，并为每个组件提供一个值？

【参考方案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';