How to load data in application route

@belgoros wrote:

I’m using ESA (ember-simple-auth) and have login and logout actions defined in application.js route as follows:

# routes/application.js

import { inject as service } from '@ember/service';
import Route from '@ember/routing/route';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
import config from '../config/environment';

export default Route.extend(ApplicationRouteMixin, {
  currentUser: service('current-user'),

actions: {
    login: function() {
      let oauthUrl = config.oauthUrl;
      let clientId = config.clientID;
      let redirectURI = `${window.location.origin}/callback`;
      let responseType = `token`;
      let scope = `profile%20openid`;
      window.location.replace(oauthUrl
                            + `?client_id=${clientId}`
                            + `&redirect_uri=${redirectURI}`
                            + `&response_type=${responseType}`
                            + `&scope=${scope}`
      );
    },
    logout() {
      this.get('session').invalidate();
    }
  },

  beforeModel() {
    return this._loadCurrentUser();
  },

  sessionAuthenticated() {
    this._super(...arguments);
    this._loadCurrentUser();
  },

  _loadCurrentUser() {
    return this.get('currentUser').loadCurrentUser().catch(() => this.get('session').invalidate());
  }

The problem is that when I tried to load some data in model hook like that in the same router:

# routes/application.js
...
model() {
    return this.store.findAll('shop');
  },
...

it failed because I had no token at that moment and /shops end-point was protected in the back-end side (Rails).

I was going to display a drop-down list in the application.hbs template:

{{#if session.isAuthenticated}}
<select>
{{#each model as |shop|}}
    <option value={{shop.id}}>{{shop.identifier}}-{{shop.name}}</option>
{{/each}}
</select>
{{/if}}

In the same application.hbs temlate I have a navbar where the above drop-down list should be displayed. I can display loged in user name and logout button or login button in the navbar depending on if the user is logged in or not:

{{#if session.isAuthenticated}}
        {{#if currentUser.user}}
<li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              <span class="oi oi-person" title="user" aria-hidden="true"></span>
              {{currentUser.user.username}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a {{action 'logout'}} class="dropdown-item">{{t 'navbar.logout'}}</a>
            </div>
          </li>
        {{/if}}
      {{else}}
        <a {{action 'login'}} class="btn btn-light">{{t 'navbar.login'}}</a>
      {{/if}}

How to achieve that behaviour ? Is it possible to load a model from another route, controller ? Or what I’m doing is not possible ? Thank you.

Posts: 3

Participants: 2

Read full topic