Ionic Starter Template - How to use setting provider to store jwt

Ionic Framework ionic-v3
1

Hi,

How do i use this provider to store a jwt token…

user.ts


 constructor(public http: Http, public api: Api, public settings: Settings) {
    }

    loginJWT(account: any) {

        let endpoint = 'account/' + account.id + '/jwt/';

        let seq = this.api.post(endpoint, {}).share();

        seq.map(res => res.json()).subscribe(res => {
            console.log(res);

            if (res.success) {

                console.log(res.data);

                this.settings.setValue("user", account);
                this.settings.setValue("jwt", res.data);

                console.log("in");
                this._loggedIn(res);

            }

        }, err => {

        });

        return seq;
    }

error: “this.setting is undefined”

settings.ts

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

import { Storage } from '@ionic/storage';

/**
 * A simple settings/config class for storing key/value pairs with persistence.
 */
@Injectable()
export class Settings {
  private SETTINGS_KEY: string = '_settings';

  settings: any;

  _defaults: any;
  _readyPromise: Promise<any>;

  constructor(public storage: Storage, defaults: any) {
    this._defaults = defaults;
  }

  load() {
    return this.storage.get(this.SETTINGS_KEY).then((value) => {
      if (value) {
        this.settings = value;
        return this._mergeDefaults(this._defaults);
      } else {
        return this.setAll(this._defaults).then((val) => {
          this.settings = val;
        })
      }
    });
  }

  _mergeDefaults(defaults: any) {
    for (let k in defaults) {
      if (!(k in this.settings)) {
        this.settings[k] = defaults[k];
      }
    }
    return this.setAll(this.settings);
  }

  merge(settings: any) {
    for (let k in settings) {
      this.settings[k] = settings[k];
    }
    return this.save();
  }

  setValue(key: string, value: any) {
    this.settings[key] = value;
    return this.storage.set(this.SETTINGS_KEY, this.settings);
  }

  setAll(value: any) {
    return this.storage.set(this.SETTINGS_KEY, value);
  }

  getValue(key: string) {
    return this.storage.get(this.SETTINGS_KEY)
      .then(settings => {
        return settings[key];
      });
  }

  save() {
    return this.setAll(this.settings);
  }

  get allSettings() {
    return this.settings;
  }
}
2

You don’t seem to initialize settings in settings.ts to a default value nor ever seem to call load. Which means settings will be undefined when you call this.settings.setValue.

3

@SigmundFroyd do you mean by initialise setting in settings.ts?

Am i not initialising it in the constructor of my user.ts?

public settings: Settings

And are you saying i need to call the load() function first before i can get and set anything?

     return this.settings.load().then(() => {
            this.settings.setValue("jwt", jwt);
            this.settings.setValue("user_id", user_id);
            this.settings.save();
        });

like this?

5

The public settings: Settings in your user.ts constructor only initializes your Settings provider, and not the settings object you have settings: any; in your Settings provider.

So based on how you have your code set-up right now, yes you at some point have to call load() and make sure that you don’t set anything until it’s called.

An alternative solution is to simplify your code, which seems a bit mishmashed as is, into something like this:

@Injectable()
export class Settings {
  private SETTINGS_KEY_PREFIX: string = '_settings_';

  constructor(public storage: Storage) {
  }

  setValue(key: string, value: any) {
    return this.storage.set(this.SETTINGS_KEY_PREFIX + key, value);
  }

  getValue(key: string, defaultValue: any) {
    return this.storage.get(this.SETTINGS_KEY_PREFIX + key)
    .then(value => value || defaultValue)
    .err(_ => defaultValue);
  }
}
6

This setting.ts is not what i made but it came with the ionic super starter pack. https://github.com/ionic-team/ionic-starter-super/blob/master/src/providers/settings/settings.ts

“pre-built pages, providers, and best practices for Ionic development.”

This is why i want to learn how to make use of it.

7

KKHAN,
Did you find a solution for this? I’m also interested in learning how to deal with settings and how to store a jwt token.