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

Question

我在vue2项目中使用vue-class-component(和vue-property-decorator)。我希望在加载每个组件时将组件级安全检查合并到该组件中。我设想一个这样的签名:

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

在内部，传递的参数(USERS_LIST)是针对一些Vuex存储进行检查的，如果失败，用户将被通知或使用vue路由器重定向。我可以处理所有的布线，但我有点迷失在如何创建一个组件级装饰器，或扩展现有的@Component装饰器在我自己。

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

Answer 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';