使用烬辛烷登录后刷新应用程序路由模型

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 / 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服务上使用authenticationSucceeded事件，然后调用session。因此，我认为此Route的构造函数可以解决问题：

refresh