[英]Trigger transition to 'loading' route after ember-simple-auth authentication
[英]User loading after authentication with ember simple auth
我使用 ember simple auth 来验证我的用户。 它工作得非常好,除非用户刚刚登录。
我有一个助手询问当前用户:
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
export default Helper.extend({
currentUser: service('current-user'),
compute([feature,currentUser]) {
let role = currentUser.get('user.role')
Helper 用于嵌入在 application.hbs 中的模板中的模板
{{#if (permission-for "users" currentUser)}}
<li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
{{/if}}
当前的用户服务与文档中的这个重复: https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md#loading-the-user-带有它的 ID
我的 application.js 也在使用同一指南中的代码。
根据我的尝试, sessionAuthenticated
开始运行,并且在await this._loadCurrentUser();
助手被执行,并完成运行sessionAuthenticated
发生的情况是我想要的用户属性未定义,并且无法根据用户的角色显示界面元素。
我该如何解决这个问题?
编辑相关问题:如何在模板中使用 ember simple auth 来确定用户是否应该看到界面的某些部分? 例如菜单选择。
首先,如果您将currentUser
服务注入服务,我建议不要将其传递给帮助程序。
接下来,您可以在加载用户后让帮助程序重新计算:
export default Helper.extend({
currentUser: service('current-user'),
init() {
if(!this.currentUser.user) {
this.currentUser.runAfterLoaded.push(() => this.recompute());
}
},
compute([feature]) {
if(!this.currentUser.user)
return false;
}
let role = this.currentUser.get('user.role')
...
return ..;
}
});
您还需要在this.set('user', user);
之后将this.runAfterLoaded.forEach(x => x())
添加到current-user
服务的load()
function; 以及this.set('runAfterLoaded', [])
到init
钩子。
另一种可能性是构建一个 mixin,在AuthenticatedRouteMixin
之后添加到相关路由,以确保加载当前用户。
您的方法的问题是助手正在同步执行,并且没有以重新计算的方式“监视” currentUser
服务。 使用计算属性来做你想做的事情会容易得多:
控制器/application.js
currentUser: service(),
hasPermissionForUsers: computed("currentUser.user", function() {
const user = this.get("currentUser.user");
if (! user) return false;
return user.get("role") === "users"; // taking a random guess at what your helper does here
})
加载用户后,此属性现在将重新计算:
应用程序.hbs
{{#if hasPermissionForUsers}}
<li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
{{/if}}
如果你必须使用助手,它是可行的,但它并不漂亮。 它不那么优雅的原因是助手无法访问相同的上下文,因此重新计算更加困难。 你可以这样做:
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
import { run } from '@ember/runloop';
import { addObserver, removeObserver } from '@ember/object/observers';
export default Helper.extend({
currentUser: service(),
willDestroy() {
this._super(...arguments);
const container = this.get('_container');
removeObserver(container, 'currentUser.user', this, this.update);
},
compute([feature, container]) {
addObserver(container, 'currentUser.user', this, this.update);
this.set('_container', container); // used for cleanup
const user = this.get('currentUser.user');
if (! user) return false;
return user.get('role') === feature;
},
update() {
run.once(this, this.recompute);
}
});
然后像这样使用它:
应用程序.hbs
{{#if (permission-for "users" this)}}
<li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li>
{{/if}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.