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

Question

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

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

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

我的申请途径（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/templates/application.hbs）

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

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

边栏组件（app/components/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

可以使用authenticationSucceeded event on the session service and then call refresh。所以我认为你的路线的这个构造函数可以做到这一点：

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

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

Refresh application route model after login with ember octane

authentication

ember.js

model

refresh