我怎样才能在服务中运行一个函数，先获取一个 API 密钥？答案

【问题标题】：How can I run a function in a service, to get an API key before anything else?我怎样才能在服务中运行一个函数，先获取一个 API 密钥？
【发布时间】：2021-06-04 13:16:02
【问题描述】：

我正在运行 ionic-angular 框架，该框架正在处理一个在我之前启动的应用程序。我需要先在服务中运行一个函数以从外部服务器获取 API 密钥。因为我想检查用户是否有 API 密钥，并通过向需要 API 密钥的服务器发出另一个请求来检查他们存储的 GUID 是否有效。因为我要检查它们是否需要路由到登录页面。当我有路由保护检查用户是否登录时，我的 API 请求未完成或出错，因为我还没有 API 密钥。

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

如果我理解您的问题，您是在问这个问题：您需要检查“某事”以确定用户在您打开应用程序的开头是进入登录页面还是进入另一个屏幕。而那个“东西”包括发出 http 请求。

我会告诉你怎么做，但根据我的经验，如果你需要发出 HTTP 请求来决定将用户重定向到哪个屏幕，你会同时得到一个空白页面。取决于连接 0.1s、0.3s、0.7s……但它很丑。因此，另一种方法是创建一个带有加载程序圆圈的“启动”屏幕，并将该页面用作初始页面。然后页面会检查任何内容并将您带到下一页。

现在，回答您的问题：您需要一个“CanActivate”。 CanActivate 是在访问路由之前执行的守卫（代码），以检查您是否可以访问该页面或将用户重定向到另一个页面。这对于本地检查（例如检查本地存储）非常有用，但正如我所说，http 请求会在一小段时间内导致空白页。请按以下步骤操作：

1 - 首先您需要创建 CanActivate 类。这就像在 ionic 中创建一个普通的服务。然后让你的服务实现 CanActivate 接口：

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } form 'rxjs';  // Install 'npm i rxjs' if you don't have it!

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate { }

那么这个服务需要实现一个叫做canActivate的函数：

export class LoginGuard implements CanActivate {

   constructor(private router: Router) { }

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : boolean|Observable<boolean> {

       return new Observable<boolean>( observer => {

           // HERE CHECK
           if (!condition_to_avoid_login) {
                // Complete the expected route, and enter the login
                observer.next(true);
                observer.complete();
           }
           else {
                // Avoid login, go somewhere else:
                observer.next(false);
                this.router.navigate("/my-other-page");
                observer.complete();
           }

       })

   }

}

2 - 您需要将此 Guard 添加到您的路线中。在您的路由文件：app-routing.module.ts 中，将此保护添加到您的页面：

import { LoginGuard } from '...../login-guard.service';

const routes: Routes = [
   ...
   {
      path: 'login',
      loadChildren: () => import('...../login.module').then( m => m.LoginPageModule),
      canActivate: [LoginGuard]
   }
   ...
]

现在，每当用户访问此路由 (/login) 时，LoginGuard 都会触发。在那里你决定是继续登录页面还是重定向。

【讨论】：