title: How to redirect to login page if the user is not logged in?
body: <p>I have implemented the before login and after login guard so that some users can not access all the pages. My question is when user is not logged in &amp; when they try to enter the unauthorized page such as "localhost:4200/restricted_page" it should be redirected to login page "localhost:4200/login". But I am not being able to redirect to login page. Now it redirects only to localhost:4200 only. </p>
  
  <p>Where should I fix the code?</p>
  
  <h2>before-login.guard</h2>
  
  <pre><code>export class BeforeLoginGuard implements CanActivate {
      canActivate(
          next: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
  
          return !this._tokenService.loggedIn();
  
      }
  
      constructor(private _tokenService: TokenService) { }
  }
  </code></pre>
  
  <h2>after-login.guard</h2>
  
  <pre><code>export class AfterLoginGuard implements CanActivate {
  
      constructor(private _tokenService: TokenService) { }
  
      canActivate(
          next: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
  
          return this._tokenService.loggedIn();
      }
  }
  </code></pre>
  
  <h2>token.service</h2>
  
  <pre><code>export class TokenService {
      payload(token) {
          const payload = token.split('.')[1];
          //decoding 
          if (typeof (payload) !== 'undefined')
              return JSON.parse(atob(payload));
          return false;
      }
  
      loggedIn() {
          // return this.isValid();
          const token = this.getToken();
          console.log("token", token);
          if (token) {
              const payload = this.payload(token);
              if (payload) {
                  return Object.values(this.iss).indexOf(payload.iss) &gt; -1 ? true : false;
              }
          }
          return false;
      }
  }
  </code></pre>