使用ember octane登录后刷新应用程序路由模型

Question

我有一个带有侧边栏组件的应用程序模板。这个侧边栏组件被传递给应用程序路由模型，以显示在列表中。应用程序路由检查用户是否经过身份验证，如果没有，则跳过模型加载。索引路由不是受保护的路由，因此它在未登录时仍会显示，只是没有用户特定的数据。当用户登录或尝试使用受保护的路由时，他们会被重定向到登录路由，然后返回到尝试的路由转换或索引。

似乎没有任何方法可以强制应用程序路由的模型钩子在登录后刷新。我尝试将应用程序路由中的数据加载移出到服务，并从登录路由调用服务上的刷新方法，但这导致了相同的问题。

所以，我的主要问题是，在登录后加载应用程序模板中所需的数据的推荐方法是什么？我唯一的选择是将这个侧边栏组件移动到另一个只有在登录后才能访问的模板吗？这感觉比应该的更难，所以我假设我在这里遗漏了路由/组件之间的数据流的一些基本概念！谢谢!

我的应用路由(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");
    }
  } 
}

应用模板(app/ Template /application.hbs)

<HeadLayout />
<div class="wrapper">
    <SideBar @projects={{this.model}} />

    <div id="content">
        <NavBar />
        <div>
            {{outlet}}
        </div>
    </div>
</div>

侧边栏组件(app/ component /side-bar.hbs)

<nav id="sidebar">
    <div class="container">        
        <div class="sidebar-content">
            ...
            {{#if this.session.isAuthenticated}}                
                <div class="sidebar-projects">
                        ...
                        <div class="list-group">
                            {{#each this.projects as |project|}}
                                <button type="button">
                                    {{project.name}}
                                </button>
                            {{/each}}
                        </div>
                    </div>   
            {{else}}
                <p>Login to access projects.</p>
            {{/if}}
        </div>
    </div>
</nav>

我的路由器(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'});
    });
});

Answer 1

您可以在session服务上使用authenticationSucceeded事件，然后调用refresh。所以我认为你的Route的这个构造函数可以做到这一点：

constructor() {
  super(...arguments)
  this.session.on('authenticationSucceeded', () => this.refresh());
}