Данные, сохраненные в сервисе, теряются при обновлении или изменении страницы - PullRequest
0 голосов
/ 26 октября 2018

У меня есть приложение Angular 5, и я пытаюсь использовать логин Google OAuth, чтобы получить имя пользователя, а затем установить это имя пользователя в службе, которая будет использоваться как зарегистрированный пользователь.Прежде чем добавить логин, я установил значение вручную в сервисе, и это работало без проблем.Теперь я устанавливаю имя пользователя из входа в Google, похоже, что значение, которое я установил, теряется при каждом обновлении страницы (или при вызове нового экземпляра службы).

Значение возвращается правильно излогин Google (я проверил в консоли), так что я знаю, что все в порядке там.У меня сложилось впечатление, что сервисы Angular были постоянными в других модулях?Это тот случай, когда каждый раз, когда я вызываю этот сервис, он создает новую пустую переменную 'tempuser'?Если так, то есть ли способ обойти это, чтобы я мог сохранить значение во всем приложении, пока пользователь не выйдет из системы?

Это сама служба:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";

@Injectable()
export class WmApiService {

  //private _baseUrl = "http://wm-api.webdevelopwolf.com/"; // Test server api
  private _baseUrl = "http://localhost:58061/"; // Dev server api 
  tempuser = "";
  tempuseravatar = "";
  tempuserfullname = "";
  tempuseremail = "";
  userloggedin = 0;
  modules: any;

  constructor(private _http: Http) {
    console.log('Wavemaker API Initialized...');
  }

  // On successful API call
  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  // On Error in API Call
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  // Basic Get W/ No Body
  getService(url: string): Promise<any> {
    return this._http
        .get(this._baseUrl + url)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
  }

  // Basic Post W/ Body
  postService(url: string, body: any): Promise<any> {
    console.log(body);
    let headers = new Headers({'Content-Type': 'application/json'});
    return this._http
      .post(this._baseUrl + url, body, {headers: headers})
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }

}

И простой примергде это будет называться:

import { Component, OnInit } from '@angular/core';
import { WmApiService } from '../../wm-api.service';

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

  userSignedToJourney: boolean;

  constructor(private _wmapi: WmApiService) { }

  ngOnInit() {
    this.userRegisteredToJourney();
  }

  // Check if Trailblazer is already on Journey
  userRegisteredToJourney() {
    this._wmapi
    .getService("Journey/TrailblazerRegistered/" + this._wmapi.tempuser)
    .then((result) => {
      if (result == 1) this.userSignedToJourney = true; else this.userSignedToJourney = false;
    })
    .catch(error => console.log(error));
  }

}

И пользовательское временное значение задается так:

import { Component, OnInit } from '@angular/core';
import { WmApiService } from '../wm-api.service';
import { Router } from "@angular/router";

declare const gapi: any;

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

  constructor(private _wmapi: WmApiService, private router: Router) { }

  public auth2: any;
  userProfile: any;
  user: any;

  // Initalise Google Sign-On
  // NOTE: Currently registered to http://localhost:4200/ - will need to change when on server to final URL
  public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: '933803013928-4vvjqtql0nt7ve5upak2u5fhpa636ma0.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        scope: 'profile email',
        prompt: 'select_account consent'
      });
      this.attachSignin(document.getElementById('googleBtn'));
    });
  }

  // Log user in via Google OAuth 2
  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
      (googleUser) => {
        // Get profile from Google
        let profile = googleUser.getBasicProfile();        
        // Save user to the API until changed
        this._wmapi.tempuser = profile.getName().match(/\(([^)]+)\)/)[1];
        this._wmapi.tempuseravatar = profile.getImageUrl();
        this._wmapi.tempuserfullname = profile.getName();
        this._wmapi.tempuseremail = profile.getEmail();
        // Log the user in
        this._wmapi.userloggedin = 1;
        // Redirect to dashboard
        this.router.navigate(['/dashboard']);
      }, (error) => {
        alert(JSON.stringify(error, undefined, 2));
        // To get auth token - googleUser.getAuthResponse().id_token;
        // To get user id - profile.getId();
      });
  }

  ngAfterViewInit(){
    this.googleInit();
  }

  ngOnInit() {
  }

}

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Да, у вас может быть несколько экземпляров service в Angular, но не каждый раз, когда вы вызываете его.Служба имеет одинаковый экземпляр в том же уровне модулей.Следовательно, чтобы иметь один экземпляр службы, предоставьте его в app.module.ts.Кроме того, любые данные, хранящиеся в службе, могут быть потеряны при обновлении. Вы можете использовать localStorage или sessionStorage для той же цели.

0 голосов
/ 26 октября 2018

Несколько вещей выглядят здесь не по порядку.

  1. Внедрение зависимостей неправильно

Вы внедряете свою службу WM API в компонент, а затем настраиваете ее там,Это не должно иметь место, вы должны сделать это на самом сервисе и на init.И служба не должна быть в состоянии «готово», пока не получит эти данные Google API.Во-первых, ваш компонент не должен интересоваться настройкой сервисов - он только запрашивает сервисы и использует их.Во-вторых, если вы используете сервис в других местах, например, когда нет компонента входа, кто будет настраивать ваш сервис?И в-третьих, если у вас есть несколько экземпляров службы, это, вероятно, означает, что вы делаете это неправильно - вы должны предоставлять услуги на глобальном уровне приложений, чтобы они все использовали один и тот же экземпляр, но даже если нет, вам все равно нужно иметьслужба заботится о своих зависимостях, а не о потребителях службы.

Шаги по исправлению этой конкретной части:

  • извлекает из компонента gapi.load () и т. д.поместите его в сервис
  • предоставьте сервис на уровне приложения, а не на уровне компонента (или ленивого модуля), если это вообще возможно.

  • Проблема с перезагрузкой страницы

Возможно, некоторые из этих вещей постоянны - вы говорите, что при перезагрузке страницы вы теряете вещи.Это логично - при каждой перезагрузке страницы содержимое памяти исчезает, и у вас появляется новое приложение.Возможно, вы хотите хранить такие вещи, как токены JWT и получать доступ к вещам в sessionStorage или localStorage.Если есть такие вещи, которые должны сохраняться при повторной загрузке страниц, вы также должны создать и предоставить службу хранения в своем приложении, которая предлагает службы сериализации / десериализации для вашей службы WM API (и других).Опять же, сервис WM Api внедряется в это хранилище, поэтому он может настроить себя при запуске (в своем конструкторе).

Http неправильный

Http, Headers, Response и в основном весь @angular/http устарел в Angular 4.3 - вы должны использовать HttpClient и друзей из @angular/common/http,Изменение должно быть действительно простым, и оно того стоит.Также попробуйте вывести себя из .toPromise() на Http-клиенте и в наблюдаемые объекты.Это облегчит работу с другими вещами (также наблюдаемыми) во всем приложении, и изменение также относительно невелико - наблюдаемые Http (клиент) в любом случае завершаются после успеха или неудачи, поэтому ваша логика должна оставаться такой же (просто используйте * 1036)* вместо then(successHandler, errHandler)).

Документ

Я вижу, вы также используете document.getElementById (и, возможно, другие вещи).Было бы гораздо лучше не использовать глобальные переменные браузера напрямую, а вместо этого вводить прокси, предоставляемые Angular.В конечном итоге вы будете благодарны себе, что сделали это.

...