CODEWITHSUNDEEP
javascriptember.jsember-dataember-cli
J Weezy
J Weezy

Reputation: 3957

Why does my current-client service get rebuilt everytime the URL is changed in the address bar?

I have a current-client service in Ember that is designed to pull the current user's information from the database and store it inside the service so that it can be used throughout the application. As long as I click on the navigation menu links, the current user information is preserved. But, when changing the URL in the address bar, the current user gets wiped out and the service has to go back and get the information again.

Why is this happening and how can I prevent it from happening?

Update: I am using the authenticationMixins from Ember-Simple-Auth. Ideally, the solution provided will not impact this. For example, when the client is authenticated and logged in, if they try to navigate to the Login page then they should just be routed to the Index page, instead. Alternatively, if the unauthenticated client attempts to navigate to a protected page by just typing in the URL, then the application should authenticate the user and then route them to the page that they were originally trying to navigate to (without forcing the user to re-navigate).

Update 2: Specifically, the information that is being wiped out is whether the client has successfully completed their 2FA (i.e., isTwoFactorAuthenticated goes from True to False). This impacts the navigation menu that we are drawing based on whether the client is both authenticated and 2FA completed. In other words, the navigation menu is wrong because it makes the client look like they are logged out even though they are not.

Service: Current-client.js 

import Service, { inject as service } from '@ember/service';

export default Service.extend({

    store: service('store'),

    isTwoFactorAuthenticated: false,

    twoFactorCodeSendMethod: null,

    client: null,

    loadCurrentClient() {

        this.get('store').queryRecord('client', {me: true})
        .then((client) => {

            this.set('client', client);
        });
    },
});

Route: Application.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({

    session: service('session'),
    currentClient: service('current-client'),

    beforeModel() {

        this._super(... arguments);
        this.loadCurrentClient();
    },

    activate() {

        this._super(...arguments);

        document.body.classList.add('gray-bg');
    }, 

    init() {

        this._super(... arguments);

        this.get('session').on('authenticationSucceeded', () => {

            this.loadCurrentClient();

            this.get('currentClient').set('twoFactorCodeSendMethod', null);
            this.get('currentClient').set('isTwoFactorAuthenticated', false);
        }),

        this.get('session').on('invalidationSucceeded', () => {

            this.get('currentClient').set('client', null);
            this.get('currentClient').set('isTwoFactorAuthenticated', false);
            this.get('currentClient').set('twoFactorCodeSendMethod', null);

            window.location.replace('/clients/login');
        });
    },

    loadCurrentClient() {

        if(this.get('session').get('isAuthenticated')) {

            this.get('currentClient').loadCurrentClient();
        }
    },
});

Upvotes: 2

Views: 61

Answers (1)

jrjohnson
jrjohnson

Reputation: 2459

Since you are using ember-simple-auth already you can use the session service to store/cache the data. This will tie it to authentication so when the user logs out the data is also removed. By default ember-simple-auth stores session data in local storage which persists even when the browser is closed you may need to customize this to fit your requirements.

import Service, { inject as service } from '@ember/service';

export default Service.extend({
  session: service(),
  store: service(),

  isTwoFactorAuthenticated: computed('session.data.isTwoFactorAuthenticated', {
    get() {
      return this.session.data.isTwoFactorAuthenticated || false;
    },
    set(key, value) {
      this.session.set('data.isTwoFactorAuthenticated', value);
      return value;
    }
  }),

  twoFactorCodeSendMethod: null,

  client: null,

  loadCurrentClient() {
    if (this.session.data.client) {
      this.client = this.session.data.client;
      return;
    }

    this.get('store').queryRecord('client', {me: true})
     .then((client) => {
       this.set('client', client);
       this.session.set('data.client', client);
    });
  },
});

Upvotes: 1

Related Questions