使用 ember simple auth 進行身份驗證后加載用戶

Question

我使用 ember simple auth 來驗證我的用戶。 它工作得非常好，除非用戶剛剛登錄。

我有一個助手詢問當前用戶：

import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';

export default Helper.extend({
  currentUser: service('current-user'),
  compute([feature,currentUser]) {
    let role = currentUser.get('user.role')

Helper 用於嵌入在 application.hbs 中的模板中的模板

{{#if (permission-for "users" currentUser)}}
  <li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
  {{/if}}

當前的用戶服務與文檔中的這個重復： https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md#loading-the-user-帶有它的 ID

我的 application.js 也在使用同一指南中的代碼。

根據我的嘗試， sessionAuthenticated開始運行，並且在await this._loadCurrentUser(); 助手被執行，並完成運行sessionAuthenticated

發生的情況是我想要的用戶屬性未定義，並且無法根據用戶的角色顯示界面元素。

我該如何解決這個問題？

編輯相關問題：如何在模板中使用 ember simple auth 來確定用戶是否應該看到界面的某些部分？ 例如菜單選擇。

Answer 1

首先，如果您將currentUser服務注入服務，我建議不要將其傳遞給幫助程序。

接下來，您可以在加載用戶后讓幫助程序重新計算：

export default Helper.extend({
  currentUser: service('current-user'),
  init() {
    if(!this.currentUser.user) {
      this.currentUser.runAfterLoaded.push(() => this.recompute());
    }
  },
  compute([feature]) {
    if(!this.currentUser.user)
      return false;
    }
    let role = this.currentUser.get('user.role')
    ...
    return ..;
  }
});

您還需要在this.set('user', user);之后將this.runAfterLoaded.forEach(x => x())添加到current-user服務的load() function； 以及this.set('runAfterLoaded', [])到init鈎子。

---

另一種可能性是構建一個 mixin，在AuthenticatedRouteMixin之后添加到相關路由，以確保加載當前用戶。

Answer 2

您的方法的問題是助手正在同步執行，並且沒有以重新計算的方式“監視” currentUser服務。 使用計算屬性來做你想做的事情會容易得多：

控制器/application.js

  currentUser: service(),

  hasPermissionForUsers: computed("currentUser.user", function() {
    const user = this.get("currentUser.user");

    if (! user) return false;

    return user.get("role") === "users"; // taking a random guess at what your helper does here
  })

加載用戶后，此屬性現在將重新計算：

應用程序.hbs

  {{#if hasPermissionForUsers}}
    <li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
  {{/if}}

如果你必須使用助手，它是可行的，但它並不漂亮。 它不那么優雅的原因是助手無法訪問相同的上下文，因此重新計算更加困難。 你可以這樣做：

import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
import { run } from '@ember/runloop';
import { addObserver, removeObserver } from '@ember/object/observers';

export default Helper.extend({

  currentUser: service(),

  willDestroy() {
    this._super(...arguments);
    const container = this.get('_container');
    removeObserver(container, 'currentUser.user', this, this.update);
  },

  compute([feature, container]) {
    addObserver(container, 'currentUser.user', this, this.update);
    this.set('_container', container); // used for cleanup

    const user = this.get('currentUser.user');

    if (! user) return false;

    return user.get('role') === feature;
  },

  update() {
    run.once(this, this.recompute);
  }
});

然后像這樣使用它：

應用程序.hbs

{{#if (permission-for "users" this)}}
  <li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
{{/if}}