In my vue2 project, I am utilizing vue-class-component along with vue-property-decorator. My goal is to implement component-level security validation for each component when it loads. I imagine implementing it with a signature like this:
@Component
@Security('USERS_LIST')
export default class UserList extends Vue {
...
}
Basically, the parameter passed ('USERS_LIST') will be validated against a Vuex store internally, and if it fails, the user will be either notified or redirected using Vue-Router. I can take care of setting up everything myself, but I am not quite sure how I can create a custom decorator for component level security checks or extend the existing @Component decorator on my own.
I am thinking of using a mixin to override a lifecycle method in order to check the state for security verification. However, I am unsure of how to define the @Security decorator and assign a value to it for each individual component.