Question

我希望有两个布局，一个可以看到一些路线的客人：/contacts，/rules，controller等...另一个用于经过身份验证的用户，意味着他们必须先登录才能进入授权路线。如何为不同的路径组定义两个布局？

Answer 1

答案是维护一项保存用户状态的服务。

// services/user-state
import Ember from 'ember';

export default Ember.Service.extend({
  loggedIn: true
});

然后，根据您的组织方式，您可以将服务注入控制器或路由。所以 - 您可以访问loggedIn

在您的模板中，您将使用handlebars / htmlbars if帮助器。

{{#if loggedIn}}
  render logged-in stuff... 
{{/else}}
  render message explaining that this is only for logged in users
{{/if}}

您还可以根据当前会话数据将用户重定向到其他路由。您可能拥有适用于某些角色的完整路线，或者您的模板部分可能会因角色而有所不同。

如果您尚未登录，则可能无法访问您的个人资料页面。该路线可能完全不受限制，或者可能会将您重定向到登录页面。另一方面，也许它只是一个“登录”按钮组件或模板的一部分，显示你是否没有登录，如果你是“hello sheriffderek”。

还有Ember插件用于更强大的“角色”轮廓。想想一个博客页面，可能有一个实际用户的“编辑”按钮，但是主持人的“标记”按钮。在这种情况下，您不能只在某个地方嵌套完全不同的路线。

大多数身份验证插件/库都将具有某种会话状态的“服务”。但模板明智，基本思想就像JS if / else语句。

if (helpful) {
  this.upvote();
} else {
  // something else
}

我希望这会有所帮助。：）

Answer 2

有一种方法可以使用Ember的路由器，通过在路由中嵌套经过身份验证的路由来解决此问题。这是路由器的示例：

Router.map(function() {
  this.route('contacts');
  this.route('rules');

  this.route('authenticated', { path: '/' }, function() {
    this.route('settings');
    this.route('profile');
  });
});

转到/contacts和/rules不需要任何身份验证，但转到/settings会。

请注意传递给path路由的authenticated选项。由于我们将其设置为/，因此它不会显示在网址中，因此它将取代application.index。如果这听起来很奇怪，请阅读索引页面in the Ember.js tutorial的内容。

Answer 3

查看ember-simple-auth插件：）

它有许多关于授权的有用类，包括用于用例的mixins。如果您只想让登录用户看到路由，只需使用AuthenticatedRouteMixin，如下所示：

/app/routes/protectedRoute.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin);

ember.js 2.7.0中的多个布局

3 个答案: