Typescript angular queryparams

Question

I have some code like this

  ngOnInit(): void {
    this.activatedRoute.url.subscribe(() => {
      const token = this.activatedRoute.snapshot.queryParamMap.get('token');
      const redirectPage = this.activatedRoute.snapshot.queryParamMap.get('redirectPage');
      if (token) {
        localStorage.setItem(AuthenticationStorageKey, token);
        if (redirectPage) {
          this.router.navigate([redirectPage]);
        } else {
          this.router.navigate(['']);
        }
      } else {
        this.router.navigate([`/error/404`]);
      }
    });
  }

What I does not like is that I have too many IF and ELSE, anybody knows some better solution, thanks?

Answer 1

Defaults & Ternaries

There is nothing wrong with statements.

However Javascript and most C like languages allow a wide variety of branching styles.

For example you can default the navigation, and use a ternary ? (Conditional operator) to select the redirect option.

This has only 1 statement if to allow the local storage key to be set. The default navigation removes the last else and the ternary removes the inner if else.

  ngOnInit(): void {
    this.activatedRoute.url.subscribe(() => {
      var navTo = "/error/404";
      const token = this.activatedRoute.snapshot.queryParamMap.get('token');
      if (token) {
        localStorage[AuthenticationStorageKey] = token;
        const redirectPage = this.activatedRoute.snapshot.queryParamMap.get('redirectPage');
        navTo = redirectPage ? redirectPage : "";
      }
      this.router.navigate(navTo);
    });
  }

As all paths through the code result in a redirect thus the last line uses navTo to redirect to the result of the branching.

This has the effect of reducing the cyclic complexity by 1 (depending on how you measure it)