如何在服务中运行 function 以先获得 API 密钥？

Question

I'm running ionic-angular framework working on an app that was started before me. I need to run a function in a service to get an API key from an external server before anything else. Because I want to check if a user has an API key and check if their stored GUID is valid by making another request to the server which I need the API key for. Because I'm going to check if they need to be routed to the login page or not. When I have a route guard checking if a user is logged in my API requests aren't completed or error out because I don't have an API key yet.

Answer 1

If I understood your problem you're asking this: you need to check "something" to decide if the user goes to the login page or goes to another screen, at the beginning of your app, when you open it. And that "something" consists in making http requests.

I will tell you how to do it, but in my experience if you need to make HTTP requests to decide to what screen redirect the user, you will get a blank page in the meanwhile. Depending on the connection 0.1s, 0.3s, 0.7s... But it's uggly. So the alternative would be to create a "Splash" screen with a loader circle, and use that page as the initial page. Then the page checks whatever and takes you to the next page.

Now, answering your question: you need a "CanActivate". CanActivate is guard (a code) that is executed before accessing a route, to check if you can access that page or redirect the user to another page. This is very useful for local checks (like checking the local storage) but as I said, http requests will cause a blank page for a small time. Follow these steps:

1 - First you need to create the CanActivate class. That's like creating a normal Service in ionic. Then make your service implement the CanActivate interface:

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 { }

Then this service needs to implement a function called 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 - You need to add this Guard to your route. In your routing file: app-routing.module.ts, add this guard to your page:

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

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

Now everytime the user accesses this route (/login) the LoginGuard will trigger. There you decide if continue to the login page or redirect.