javascript - 为什么每次更改地址栏中的 URL 时我的当前客户端服务都会重建？

Question

我在 Ember 中有一个 current-client 服务，旨在从数据库中提取当前用户的信息并将其存储在服务中，以便在整个应用程序中使用。只要我点击导航菜单链接，当前用户信息就会被保存下来。但是，当更改地址栏中的 URL 时，当前用户将被删除，服务必须返回并再次获取信息。

为什么会发生这种情况，我该如何防止这种情况发生？

更新:我正在使用来自 Ember-Simple-Auth 的 authenticationMixins。理想情况下，所提供的解决方案不会对此产生影响。例如，当客户端通过身份验证并登录时，如果他们尝试导航到登录页面，那么他们应该被路由到索引页面。或者，如果未经身份验证的客户端试图通过键入 URL 导航到 protected 页面，则应用程序应该对用户进行身份验证，然后将他们路由到他们最初尝试导航到的页面(不强制用户重新访问)导航)。

更新 2:具体而言，被清除的信息是客户是否已成功完成其 2FA(即，isTwoFactorAuthenticated 从 True 变为 False)。这会影响我们根据客户端是否同时通过身份验证和 2FA 完成绘制的导航菜单。换句话说，导航菜单是错误的，因为它让客户看起来好像他们已经注销了，尽管他们并没有。

服务: 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);
        });
    },
});

路由: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();
        }
    },
});

Answer 1

因为您已经在使用 ember-simple-auth，所以您可以使用 session 服务 store/cache the data .这会将其与身份验证相关联，因此当用户注销时，数据也会被删除。默认情况下 ember-simple-auth 存储 session data in local storage即使在浏览器关闭时它仍然存在，您可能需要对其进行自定义以满足您的要求。

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);
    });
  },
});