我使用ember简单身份验证来验证我的用户。除非用户刚刚登录,否则它工作得很好。
我有一个要求当前用户的助手:
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}}
当前用户服务与doc的重复:https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md#loading-the-user-with-its-id
而且我的application.js也使用同一指南中的代码。
[根据我的尝试,sessionAuthenticated
开始运行,在await this._loadCurrentUser();
期间执行了助手,并完成了sessionAuthenticated
的运行
发生的事情是我想要的用户属性未定义,因此无法根据用户的角色显示界面元素。
如何解决此问题?
编辑相关问题:应该如何在模板中使用ember simple auth来确定用户是否应该看到界面的某些部分?例如菜单选项。
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
})
此属性现在将在用户加载后重新计算:application.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);
}
});
然后像这样使用它:
application.hbs
{{#if (permission-for "users" this)}} <li>{{#link-to 'users'}}<i class="fa fa-user"></i> <span>Clients</span>{{/link-to}}</li> {{/if}}
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.runAfterLoaded.forEach(x => x())
之后将load()
添加到current-user
服务中的this.set('user', user);
功能,以及将this.set('runAfterLoaded', [])
添加到init
挂钩。
另一种可能性是构建一个混入,将其添加到AuthenticatedRouteMixin
之后的相关路由中,以确保将加载当前用户。