Unable to get the value from BehaviorSubject in angular on interceptor refer the below

**
common.service.ts
**

Login service has been created.

export class CommonService {

  public tokenSubject: BehaviorSubject<UserToken>;
  public token: Observable<UserToken>;
  constructor(private httpclient: HttpClient,
              private router: Router
  ) { 
    this.tokenSubject = new BehaviorSubject<UserToken>(JSON.parse(localStorage.getItem('access_token') as string));
    this.token = this.tokenSubject.asObservable();
  }

  private commonApi = `${Appsettings._ApiEndpoint}`;

  login(data: any): Observable<any> {
    return this.httpclient.post<UserToken>(`${this.commonApi}api/user/user-login`, {loginData: data})
    .pipe(
      map(token => {
        const userToken: UserToken = token;

        localStorage.setItem('access_token' , JSON.stringify(userToken));
        this.tokenSubject.next(userToken);

        return userToken;
      })
    );
  }
}

 public get tokenValue(): UserToken {   
    return this.tokenSubject.value;
  }

**
user.ts
**

export class UserToken {
    token: string;
}

**
login.component.ts
**

Login service being called, passed with requested data.

constructor(private commonservice: CommonService,
              private router: Router
  ) { }


 login(formData:NgForm, isValid: any) {
    if(isValid) {
      this.commonservice.login(formData.value)
      .subscribe((data: any) => {
        console.log('login data : ' , data);
        this.router.navigateByUrl('/dashboard');
      }, error => {
        console.log('error : ' , error);
        alert(error.error.message);
      })
    }
    
  }

We are getting null in tokenObj and isLoggedIn console.log() Can you please help to correct what are the wrong here. And also please help to better and deep understanding how to get the value from BehaviorSubject RxJs in angular. Kindly refer the given snapshot, How will we get the data from BehaviorSubject.

**
request.interceptor.ts
**

We are unabel to get the token value on interceptor.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    this.spinner.show();
    
    const tokenObj = this.commonService.tokenValue;
    console.log('tokenObj : ' , tokenObj);
    const isLoggedIn = tokenObj && tokenObj.token;  
    console.log('isLoggedIn : ' , isLoggedIn);
    if(isLoggedIn) {   
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${tokenObj.token}`
        }
      })
    }
    return next.handle(request).pipe(
      tap(
        event => {
          if(event instanceof HttpResponse) {
            console.log('success in calling API : ', event);
            this.spinner.hide();
          }
        },
        error => {
          console.log('error in calling API : ', error);
          this.spinner.hide();
        }
      )
    );
  }