import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

import { AuthService } from './auth.service';

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

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): boolean | UrlTree {
     let url: string = state.url;

         return this.checkLogin(url);
     }

     checkLogin(url: string): true | UrlTree {
        console.log("Url: "   url)
        let val: string = localStorage.getItem('isUserLoggedIn');

        if(val != null && val == "true"){
           if(url == "/login")
              this.router.parseUrl('/expense');
           else 
              return true;
        } else {
           return this.router.parseUrl('/login');
        }
     }
    }

The first error is on line 22,

Function lacks ending return statement and return type does not include 'undefined'.

The second is on line 24

Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

CodePudding user response：

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | UrlTree {
      return this.checkLogin(state.url);
  }

  checkLogin(url: string): true | UrlTree {
    console.log("Url: "   url)
    const val: string = localStorage.getItem('isUserLoggedIn');

     if (val === 'true' && url === '/login') {
        this.router.parseUrl('/expense');
        return true;
     }

     this.router.parseUrl('/login');
     return false;
 }

CodePudding user response：

Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

In the below code, the variable val type is mentioned as string.

let val: string = localStorage.getItem('isUserLoggedIn');

However, the Storage.getItem can either return string if the key is found or null if not found

Since, on the next line you are checking the existence of value in val variable, there is no need to add the type to the val.

Function lacks ending return statement and return type does not include 'undefined'.

The function checkLogin either returns boolean value true or UrlTree. The check login function doesn't return anything when val is truthy and url is login.

if (val != null && val == "true") {
  if (url == "/login")
    this.router.parseUrl('/expense'); <---- doesn't return anything
  else
    return true;

Instead of doing val != null && val == "true" you can check truthiness of val using if (val) condition

checkLogin(url: string): true | UrlTree {
  console.log("Url: "   url)
  const val = localStorage.getItem('isUserLoggedIn');

  if( val ) {
    return url === '/login' ? this.router.parseUrl('/expense'): true;
  } else {
    return this.router.parseUrl('/login');
  }
}