装饰者可以以 angular 调用服务吗？

编程问答 2022-05-24

问题描述

我已经开始研究打字稿的装饰器。 Angular 实现了很多装饰器（组件、注入、指令等）。 我有一个循环的逻辑来验证用户是否已登录，以及他是否有权执行给定的功能。下面是一个例子：

@Component()
class MyClass {
    someMethod() {
         if(this.authService.isLogged() && this.authService.isAuth(...)) { 
             // logic
         }
    }
}

这按计划工作，但阅读代码真的很麻烦，对我的同事来说也不直观。我打算做的是制作一个装饰器，首先验证用户是否已登录，然后如果该用户满足要求，如果他同时传递两者，则该函数将执行，否则，它将忽略执行并返回一个默认值。这是我尝试并想出的登录验证功能：

export function isLogged() {
    return (target,key,descriptor) {
        const original = descriptor.value;
        descriptor.value = function (...args: any[]) {
            // <- add login verification here
            return original.apply(this,args);
        };
        return descriptor;
    }
}

我面临的问题是如何调用函数的上下文服务来验证他是否已登录，而无需明确传递“this”关键字？为了更清楚，这是我试图实现的用法

@Component()
class MyClass {
    @isAuth(...) // <- here without passing 'this'
    @isLogged()
    someMethod() {
        // logic
    }
}

我需要强调的是，这个装饰器需要将验证逻辑推迟到授权服务，因为它具有装饰器的用户登录、权限和其他相关信息。 我所要求的一个解决方案是一种向给定函数注入服务的方法。以我的示例装饰器为例，它有一个注释，表示调用授权的缺失部分。我想有一种方法可以在函数中注入和调用服务，但网上没有找到任何解决方案。

解决方法

根据我的问题中的评论，有人指出 this 关键字确实具有类的完整上下文，包括放置在其构造函数中的服务。所以我可以修改我的装饰器来访问服务：

export function isLogged() {
    return (target,key,descriptor) {
        const original = descriptor.value;
        descriptor.value = function (...args: any[]) {
            if (this.authorizationService.isLogged()) {
                return original.apply(this,args);
            } else {
                return () => {};
            }
        };
        return descriptor;
    }
}
angularangulardecoratordecoratorecmascript-6typescripttypescripttypescript