如何从服务授权中获取保护价值。面对可观察的问题

Question

我用c输入-名称，按钮-发送名称创建了一个组件。该数据使用名称为json且名称为diff形式的json服务。该服务打开了方法并创建了一个可观察的对象。服务授权从名称服务中获取价值并创建可观察的方法。通过订阅和访问页面保护使用的服务授权。问题-从授权中单击按钮两次。

import { Component, OnInit, Input, Output } from '@angular/core';
import { WorkbdService} from '../workbd.service';
import {db} from '../localDB'; 
import { AuthService } from '../auth.service';


@Component({
  selector: 'app-page-auth',
  templateUrl: './page-auth.component.html',
  styleUrls: ['./page-auth.component.scss']
})
 export class PageAuthComponent implements OnInit {
  name:string;
  pass:string;
  xuser:db[];
  constructor(private dbs:WorkbdService, private auth:AuthService) { }
  ngOnInit() {
    this.getData();
  }
  getData():void{
    this.dbs.getData().subscribe(users=>this.xuser=users);
  }
  formExecute(){
    let z=this.xuser.find(user=>user.login==this.name&&user.password==this.pass)
   console.log(`я больная копонента ${z.login}`)
    if(z.login){this.auth.setAuth(true); }
    else {this.auth.setAuth(false);}
  }
}
//html
<div>
    <label> User Name </label>
    <input type="text" [(ngModel)]="name">
    <label> Password </label>
    <input type="text" [(ngModel)]="pass">
    <button (click)="formExecute()" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a routerLink='/about'>Войти</a></button>
</div>

service name

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {db} from './localDB';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WorkbdService {

  constructor(private http:HttpClient) { }
  getData():Observable<db[]>{
    return this.http.get<db[]>('./assets/localDB.json')
  }
}

//auth service
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor() { }
  isAuth:boolean;
  getAuth():Observable<boolean>{

    if(this.isAuth==false){
      console.log(`getAuth yes ${this.isAuth}`);
      return of(false);
    }
    else if(this.isAuth==true){console.log(`getAuth no ${this.isAuth}`); return of(true);}
    else {console.log(`im stupid argument ${this.isAuth}`); return of(false)}
  }
  setAuth(flag:boolean){
    this.isAuth=flag;
    this.getAuth();
  }
}

//my guard

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable, of} from 'rxjs';
import { map } from 'rxjs/internal/operators'
import {AuthService} from './auth.service';
import {Router} from '@angular/router';

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

  constructor(private auth:AuthService, private route:Router){

  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | boolean  {
      console.log("job of canactivate");

    return new Observable<boolean>(obj=>{
      this.auth.getAuth().subscribe(data=>{
        if(data==true){console.log("visible");obj.next(true);}
        else{console.log("false visible"); obj.next(false);}        
      })
    }) 
  } 
}