处理 SPA 的外部无法访问服务的最佳方法是什么？

Question

For a personal project, I'm developing a portal that provide some services only to connected users. When you are not connected you are redirected to keycloak that manages the authentication flow (login, password recovery, ....) and redirects to my angular app with a token, then for each call to my webservice i provide the token that is verified for each request between my webservice and keycloak.

I designed my app as follow: (really simple view)

The problem I have is that my angular app has a big dependency to Keycloak and my webservice. I would like my app to be resilient and be prepared if at least keycloak and/or my webservice is offline and ideally if any error or unwanted behavior happens (ex: error 500)

I see several things I could do:

• I could create an anonymous layout (so anyone could access it directly) in my angular app with one page dedicated to redirection that first would check the availability of keycloak and my webservice (simple http request to see if I get a 200 status code), I could do it in a loop (let's say every 2 seconds) with an information message showing the status then once both are ok, redirecting to keycloak app.
• I could create an interceptor that shows an overlay each time I get a response with status code 401 for x seconds then redirect to keycloak login page.
• I could show a generic modal with informative message when I get a response with any other 400 or 500 status code, that could be closed via a button inviting the user to test it again later.

Those are the ideas I have right now but i'm not sure it's the right way.

I didn't find any relevant tutorial or article explaining how to do this properly (maybe i'm using bad keywords)

Do you have an idea?

Answer 1

I believe the best way to go with is the interceptor where you can handle different errors. For instance:

@Injectable()
export class RequestInterceptor implements HttpInterceptor {
  intercept (request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(error => {
        if (error.status === 0) {
          // Handle unreachable server
        }

        if (error.status === 401) {
          // Handle unauthenticated user
        }

        if (error.status === 500) {
          // Handle server error
        }

        return throwError(error);
      })
    );
  }
}

Checking in loop if server is reachable would cause a lot of unwanted traffic on your backend and I'm not sure if this is the solution you want to go with since you can have scaling problems if application takes off.

Answer 2

You can implement "healthcheck" before redirection, but I don't see a reason for this check in the loop. You can do it once, before actual redirect only. But that is still naive test, because there can be error during user request handling and you want be able to cover it from the SPA.

401 is not a problem with unavailability. That is an info that request is Unauthorized . You will get this info from the webservice, when you use expired token usually. It is not right to redirect user to Keycloak login page in this case. There should be already in the place silent renew, which is watching expiration and it will "refresh" token before expiration. Standard OIDC angular libraries offer this feature out of the box ( my favorite lib as well: )