Emberjs how to properly organize api requests?

Question

JavaScript

Good afternoon!
Recently got acquainted with EmberJS. There were several questions, I can not find answers in the dock.
1. When loading a page, an authorized user receives data from the server via /api/profile. However, if I try to do it via the api method, I get a request for api/profiles. Hence the question, how to get the right request? That is, I need to get the user structure, save it in the profile model and use it in routes and components.
2. Suppose the first question is sorted out. Then there was a problem with templates. There is a root template aplication. It contains the navbar component, which specifies the name of the authorized user. So, how to put user data from the model into this component? It's not in the route template.

<div id="wrapper">
        {{ nav-bar }}
        {{ outlet }}
</div>

Here in {{ nav-bar }} I would like to pass a model with user data.
Thanks in advance!

Answer 1

Hello.
For authorization, I advise you to use ready-made libraries, namely ember-simple-auth , after studying the documentation, all three questions will disappear by themselves.
But I'll suggest:
You can make a custom request via Ember.$.ajax
In ember-simple-auth, the session service is passed to routes and controllers. You can store a user in session, I do it like this (I have a JWT):

//app/services/session.js

/* global jwt_decode */

import Ember from 'ember';
import DS from 'ember-data';
import SessionService from 'ember-simple-auth/services/session';

export default SessionService.extend({
  store: Ember.inject.service(),

  user: Ember.computed('data.authenticated.user_id', function() {
    let accessToken = this.get('data.authenticated.access_token');

    if (!Ember.isPresent(accessToken)) {
      return null;
    }

    let data = jwt_decode(accessToken);
    let userId = data.sub;

    if (Ember.isPresent(userId)) {
      return DS.PromiseObject.create({
        promise: this.get('store').find('user', userId)
      });
    }
  })
});

<div id="wrapper">
        {{ nav-bar currentUser=session.user}}
        {{ outlet }}
</div>

It is possible to override the buildURL method , but in general this question-answer is from "bad practice".