angular - 需要将 graphql 登录逻辑与我的 Angular 组件分开，以使其更通用

Question

我正在使用 Angular 10 进行一些有趣的编程，我正在尝试以下内容:

我创建了一个用户库，负责配置文件、登录和注册页面及组件。我在我的项目中使用 apollo-graphql 来登录服务器。

所以我在 LoginTabComponent 的用户库中的 login() 函数是这样的:

  login(): void {
    if (this.loginForm.invalid) {
      return;
    }
    const params = this.loginForm.value;
    this.graphQlService.login(params.email, params.password).subscribe(({data}: LoginDataToken) => {
      if (!data.login) {
        this.openSnackBar('Invalid email and/or password');
      } else {
        this.auth.storeToken(data.login);
        this.router.navigate(['/']).finally(() => {
          this.openSnackBar('Hello ' + data.login.name);
        });
      }
    });
  }

登录数据 token 在这里定义:

export interface Token {
  token: string;
  exp: number;
  name: string;
}

export interface LoginToken {
  login: Token;
}

export interface LoginDataToken {
  data: LoginToken;
}

所以我正在检查表单是否有效，如果有效，则获取参数，从我创建的 graphQL 服务执行登录功能，如果数据有效，则登录用户，如果无效，则显示错误的 snackbar 。

这是来自 graphql 服务的登录函数:

const mutationLogin = gql`
    mutation Login($email: String!, $password: String!) {
      login(email: $email, password: $password) {token,exp,name}
    }
`;

  public login(email: string, password: string): any {
    return this.apollo.mutate({
      mutation: mutationLogin,
      variables: {email, password}
    });
  }

现在我希望我的 LoginTabComponent 接收一个通用函数，该函数将接收参数 user 和 password 并且它将返回某种 observable，这样我就可以订阅它。这样用户就可以随心所欲地实现服务器交互。

所以我创建了一个 LoginCallback 类型:

export type LoginCallback = (username: string, password: string) => Observable<LoginDataToken>;

并在 LoginTabComponent 中添加:

 @Input() loginCallback: LoginCallback | undefined;
 
 ngOnInit(): void {
  if (this.loginCallback === null || this.loginCallback === undefined) {
   throw new TypeError('The input ‘loginCallback’ is required');
  }
 }

然后在登录函数中，我将执行 graphql 服务的代码更改为:

  this.loginCallback(params.email, params.password).subscribe(({data}: LoginDataToken) => {

现在我留下的问题是 LoginTabComponent 被 LoginPageComponent 调用，它是这个库的一部分。并且 LoginPageComponent 正在路由中执行，所以我不知道如何将正确的函数粘贴到该组件。

我看到当您在模块中初始化组件时，您有 forRoot() 并且您可以添加参数。我不知道该怎么做。

所以..我的方向对吗？如果是这样，我如何将要执行的函数正确地粘贴到该模块？

谢谢

Answer 1

您的问题的一个可能解决方案是，您可以使用用户库模块提供服务。

我们称它为 UserLibService。

在 UserLibService 中，您可以拥有一个名为 loginCallback 的属性，如下所示。

@Injectable()
export private class UserLibService {
    loginCallback: (userName: string, password: string) => Observable<LoginDataToken>;
}

您可以在使用用户库的实际应用程序中设置此属性的值。您所要做的就是注入(inject)此 UserLibService。

并且您的 LoginTabComponent 也可以注入(inject)此服务并在 login() 函数内使用此回调来执行登录。

所以在 LoginTabComponent 的构造函数中:

constructor(private userLibService: UserLibService){}

并更新用户登录函数以使用 loginCallback:

this.userLibService.loginCallback(params.email, params.password).subscribe(({data}: LoginDataToken) => {

并且您还可以在调用该函数之前执行 null 检查和任何其他验证。

或

您可以放弃提供服务的想法，使用 forRoot() 方法配置 loginCallback。

我找到了关于使用 forRoot() 方法配置库的很好的解释 here .

https://offering.solutions/blog/articles/2019/12/31/configuring-angular-libraries/

我认为您正朝着正确的方向前进，因为在使用库时提供能够配置登录功能的灵 active 非常重要。而且我认为使用 forRoot() 方法配置库对我来说在 Angular 上更自然。