jeudi 16 avril 2020

Refresh application route model after login with ember octane

I have an application template with a sidebar component. This sidebar component is passed the application route model to display in a list. The application route checks if the user is authenticated, and if not, skips the model load. The index route is not a protected route, so it will still display when not logged in, just with no user specific data. When the user logs in or attempts to use a protected route, they are redirected to a login route and back to the attempted route transition or index.

There doesn't appear to be any way to force the application route's model hook to refresh after login. I've tried moving the data load in the application route out to a service and calling a refresh method on the service from the login route, but that resulted in the same issue.

So, my main question is what is the recommended approach to loading data after login that is needed in the application template? Is my only option to move this sidebar component to another template that is only accessible after login? This feels harder than it should be, so I am assuming I'm missing some basic concepts here with data flow between routes/components! Thanks!

My Application Route (app/routes/application.js)

import Route from "@ember/routing/route";
import { inject as service } from "@ember/service";

export default class ApplicationRoute extends Route {
  @service router;
  @service session;

  model() {
    if (this.get('session').get('isAuthenticated'))
    {
      return this.store.findAll("project");
    }
  } 
}

Application Template (app/templates/application.hbs)

<HeadLayout />
<div class="wrapper">
    <SideBar @projects= />

    <div id="content">
        <NavBar />
        <div>
            
        </div>
    </div>
</div>

Sidebar component (app/components/side-bar.hbs)

<nav id="sidebar">
    <div class="container">        
        <div class="sidebar-content">
            ...
                            
                <div class="sidebar-projects">
                        ...
                        <div class="list-group">
                            
                                <button type="button">
                                    
                                </button>
                            
                        </div>
                    </div>   
            
                <p>Login to access projects.</p>
            
        </div>
    </div>
</nav>

My router (app/router.js)

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  this.route('login');

  this.authenticatedRoute('projects', { path: '/projects'}, function() {
    this.authenticatedRoute('new');
    this.authenticatedRoute('edit');
    this.authenticatedRoute('project', { path: ':project_id' });    
  });

  this.authenticatedRoute('photos', { path: '/photos'}, function() {
    this.authenticatedRoute('photo', {path: ':photo_id'});
    });
});



Aucun commentaire:

Enregistrer un commentaire