Обновление всех пользовательских данных, когда пользователь входит в систему (доступно для наблюдения)

Question

Я работаю над angular-приложением с аутентификацией.Приложение имеет панель мониторинга, которая показывает имя пользователя, вошедшего в систему.Проблема в том, что когда вы входите в систему с новым пользователем, он по-прежнему показывает имя пользователя последнего зарегистрированного пользователя.

Таким образом, он не обновляет имя пользователя (наблюдаемое), когда пользователь входит в систему. Я думаю,проблема в том, что я получаю имя пользователя в методе ngOnInit.

Как мне обновить все данные, относящиеся к пользователю?

header.component.ts (имя пользователя должнобыть показано)

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../core/auth.service';
import { Apollo } from 'apollo-angular';
import gpl from 'graphql-tag';

const registeredUser = gpl`
  query registeredUser {
    registeredUser {
      name
    }   
  }
`

@Component({
  selector: 'dashboard-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  private user$;

  constructor(
    private authService : AuthService,
    private apollo : Apollo) { }

  ngOnInit() {
    this.user$ = this.apollo.watchQuery<any>({
      query: registeredUser
    })
      .valueChanges;
  }

  logout() {
    this.authService.logout();
  }

}

AuthService

import { Injectable } from '@angular/core';

import { JwtHelper } from 'angular2-jwt';
import { Apollo } from 'apollo-angular';
import gpl from 'graphql-tag';
import { Router } from '@angular/router';

const register = gpl`
mutation($name: String!, $email_mobile: String!, $password: String!) {
  register(name: $name, email_mobile: $email_mobile, password: $password) {
    success
    token
    user {
      name
      email
      mobile
    }
    errors {
      message
      key
    }
  }
}
`;

const login = gpl`
mutation($email_mobile: String!, $password: String!) {
  login(email_mobile: $email_mobile, password: $password) {
    success
    token
    user {
      name
      email
      mobile
    }
    errors {
      message
      key
    }
  }
}
`;

@Injectable()
export class AuthService {
  
  constructor(
    private jwtHelper: JwtHelper,
    private apollo: Apollo,
    private router: Router) { }


  isLoggedIn(): boolean {
    const token = localStorage.getItem('token');

    if(!token)
      return false;

    // Check whether the token is expired and return
    // true or false
    return !this.jwtHelper.isTokenExpired(token);
  }

  async register(name: string, email_mobile: string, password: string) {

    let regInfo = {};

    await this.apollo.mutate({
      mutation: register,
      variables: {
        name,
        email_mobile,
        password
      }
    }).subscribe(({data}) => {
      
      const regData = data.register;

      if(regData.success) {
        // set token to Local Storage
        localStorage.setItem("token", regData.token);
        this.router.navigate(['/dashboard']);
      } else {
        regInfo["errors"] = regData.errors;
      }
      regInfo["success"] = regData.success;
    });

    return regInfo;
  }

  async login(email_mobile: string, password: string) {
    let regInfo = {};

    await this.apollo.mutate({
      mutation: login,
      variables: {
        email_mobile,
        password
      }
    }).subscribe(({data}) => {

      const regData = data.login;
      if(regData.success) {
        // set token to Local Storage
        localStorage.setItem("token", regData.token);
        regInfo["user"] = regData.user;
        this.router.navigate(['/dashboard']);
      } else {
        regInfo["errors"] = regData.errors;
      }
      regInfo["success"] = regData.success;
    });

    return regInfo;
  }

  logout(){
    localStorage.removeItem("token");
  }
}

Answer 1

Вы должны подписаться на изменения в вашем классе Apollo, а не просто снимать их.Ваш код извлекает переменную, но не останавливается для прослушивания канала, когда мимо пролетает другой пользователь.

Ваш код

this.user$ = this.apollo.watchQuery<any>({
      query: registeredUser
    })
      .valueChanges;

ЧтоЯ представляю

this.apollo.valueChanges.subscribe(
      ({ data }) => {
        this.user$ = [...data.user];
      }
    );

И помните, дети, пожалуйста, отписывайтесь от своих рассылок!

Подробнее о подписках GraphQL здесь!

https://alligator.io/angular/graphql-subscriptions/