Ember.js Computed Property vs Observer vs didReceiveAttrs() в компоненте

Я создал верхнюю панель навигации в своем приложении ember.js и преобразовал ее в компонент, чтобы у меня было простое приветствие «Добро пожаловать {{currentUser.fullName}}» после входа пользователя. Есть и другие причины, по которым панель навигации будет компонентом, но пока это то, что я пытаюсь заставить работать правильно. Мы также используем аддон ember-simple-auth, и я использую значение session.isAuthenticated, чтобы это произошло.

Конечно, у меня есть маршрут «входа», когда пользователь входит в систему, он переходит в «индекс». Почему-то не кажется, что значение session.isAuthenticated сразу перехватывается при переходе на 'индекс'. Я не знаю, почему это так, но это другой вопрос.

В любом случае, я использую много компонентов в этом приложении, и большинство этих компонентов получают свои значения из сеансов и запрашивают хранилище независимо от маршрутов, поэтому я могу использовать эти компоненты на нескольких маршрутах. Панель навигации не является исключением. Сейчас у меня есть следующий рабочий код:

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    isAuthenticated: Ember.observer('session.isAuthenticated', function() {
        this.didReceiveAttrs();
    }),
    currentUserFullName: null,
    user: null,
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() {
        this._super(...arguments);

        if (this.get('session.isAuthenticated')) {
            this._setCurrentUser();
        }
    },
    _setCurrentUser() {
        this.get('currentUser').load().then(user => this.set('user', user));
    },
    onGetCurrentUser: Ember.observer('user', function() {
        this.getUser();
    }),
    getUser: function() {
        var user = this.get('user');

        if(user) {
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
        } else {
            user = this.get('store').findRecord('user', 'me');
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
        }
    }
});

Все, что я читаю, предлагает просто использовать didReceiveAttrs() вместо наблюдателя. Кроме того, в нем говорится, что вычисляемые свойства обычно являются тем, что вы хотите использовать вместо наблюдателей. Однако я не могу заставить что-либо работать без следующего:

isAuthenticated: Ember.observer('session.isAuthenticated', function() {
    this.didReceiveAttrs();
}),

Если я попытаюсь преобразовать его в вычисляемое свойство, оно, похоже, ничего не сделает с изменением свойства, если только я не обновлю страницу после того, как она уже перешла на маршрут «индекс». Если я попытаюсь использовать только метод didReceiveAttrs() с логикой this.get('session.isAuthenticated'), обновление страницы все равно потребуется.

Так что же я не понимаю в том, как использовать Ember.computedи didReceiveAttrs()? Может ли кто-нибудь привести мне пример? Или покажите мне более эффективный способ сделать то, что я пытаюсь сделать?

ОБНОВЛЕННЫЙ КОД:

// app/pods/components/navbar-main/component.js
import Ember from 'ember';
import layout from './template'; 

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.observer('session.isAuthenticated', function() {
        this.get('currentUser').load().then(user => this.set('user', user));
    }),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() {
        this._super(...arguments);

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

<!-- app/pods/components/navbar-main/template.hbs -->
{{#if session.isAuthenticated}}
    <div class="ui black user login label">
        <div class="ui grid">
            <div class="twelve wide column">
                <div class="detailed">{{currentUserFullName}}<br>Welcome</div>
            </div>
            <div class="four wide column" style="padding-top: 12px; margin-top: 0;">
                <img class="ui top aligned small avatar image" src="http://semantic-ui.com/images/avatar/small/christian.jpg">
                <!--<img class="ui top aligned tiny avatar image" src="{{currentUser.avatar}}">-->
            </div>
        </div>
    </div>
{{/if}}

ОБНОВЛЕНИЕ 2 (окончательный код с помощью @AdamCooper и @kumkanillam):

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.on('init', Ember.observer('session.isAuthenticated', function() {
        this.get('currentUser').load().then(user => this.set('user', user));
    })),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main']
});

Так что это наименьший объем кода, все еще использующий наблюдатель и вычисляемые методы, но не использующий жизненный цикл компонента. Поэтому я думаю, что иногда все же необходимо использовать наблюдателей, это то, что я придумал.