基于Ember.js Authentication - the right way创建一个简单的登录 - 在第一次访问时,用户可以转换到会话登录视图,一旦验证转换回他们首次尝试访问的路由,除了登录之外转换后,表单仍然在视图中,并为新路径呈现视图。
设置为:
Ember:1.7.0 Ember数据:1.0.0-beta.8.2a68c63a 把手:1.3.0 jQuery:1.11.1路由器:
Router.map(function() {
this.resource('sessions', function() {
this.route('logout');
this.route('login');
});
this.resource('posts', { path: '/posts' }, function() {
this.route('post', { path: '/post/:post_id' });
this.route('new');
});
});
申请途径:
export default Ember.Route.extend({
beforeModel: function() {
this.transitionTo('posts');
}
});
帖子路线:
export default Ember.Route.extend({
beforeModel: function(transition) {
if(Ember.isEmpty(this.controllerFor('sessions').get('token'))) {
return this.redirectToLogin(transition);
}
},
redirectToLogin: function(transition) {
this.controllerFor('sessions').set('attemptedTransition', transition);
return this.transitionTo('sessions');
},
model: function() {
return this.store.find('post');
},
actions: {
...
}
});
会话路线:
export default Ember.Route.extend({
// Reset Session Controller to avoid date from a past authentication
setupController: function(controller, context) {
controller.reset();
}
});
会话控制器:
export default Ember.Controller.extend({
// initialization method to verify if there is a access_token cookie set
// so we can set our ajax header with it to access the protected pages
init: function() {
Ember.Logger.log('sessons.init');
Ember.Logger.log(Ember.$);
this._super();
if (Ember.$.cookie('access_token')) {
Ember.$.ajaxSetup({
headers: {
'Authorization': 'Bearer ' + Ember.$.cookie('access_token')
}
});
}
},
// overwriting the default attemptedTransition attribute from the Ember.Controller object
attemptedTransition: null,
// create and set the token & current user objects based on the respective cookies
token: Ember.$.cookie('access_token'),
currentUser: Ember.$.cookie('auth_user'),
// create a observer binded to the token property of this controller
// to set/remove the authentication tokens
tokenChanged: function() {
Ember.Logger.log('tokenChanged');
if (Ember.isEmpty(this.get('token'))) {
Ember.$.removeCookie('access_token');
Ember.$.removeCookie('auth_user');
} else {
Ember.$.cookie('access_token', this.get('token'));
Ember.$.cookie('auth_user', this.get('currentUser'));
}
}.observes('token'),
// reset the controller properties and the ajax header
reset: function() {
this.setProperties({
username_or_email: null,
password: null,
token: null,
currentUser: null
});
Ember.$.ajaxSetup({
headers: {
'Authorization': 'Bearer none'
}
});
},
actions: {
loginUser: function() {
Ember.Logger.log('loginUser');
var _this = this;
var attemptedTrans = this.get('attemptedTransition');
var data = this.getProperties('username_or_email', 'password');
Ember.Logger.log(data);
// Clear form fields
this.setProperties({
username_or_email: null,
password: null
});
// send a POST request to the /sessions api with the form data
Ember.$.post('/api/session', data).then( function(response) {
Ember.Logger.log(response);
// set the ajax header
Ember.$.ajaxSetup({
headers: {
'Authorization': 'Bearer ' + response.api_key.access_token
}
});
// create an apiKey record on the local storage based on the returned object
var key = _this.get('store').createRecord('apikey', {
accessToken: response.api_key.access_token
});
// find a user based on the user_id returned from the request to the session api
_this.store.find('user', response.api_key.user_id).then(function(user) {
Ember.Logger.log('user->');
Ember.Logger.log(user);
// set this controller token & current user properties
// based on the data from the user and access_token
_this.setProperties({
token: response.api_key.access_token,
currentUser: user.getProperties('username')
});
// set the relationship between the User and the ApiKey models & save the apiKey object
key.set('user', user);
key.save();
user.get('api_keys').content.push(key);
Ember.Logger.log(attemptedTrans);
if(attemptedTrans) {
attemptedTrans.retry();
_this.set('attemptedTrans', null);
}
});
});
}
}
});
它是最后一次尝试启动转换的Trans.retry()。我错过了什么吗?
答案 0 :(得分:0)
你的把手中可能有糟糕的html(缺少结束标签等)。
答案 1 :(得分:0)
Kingpin2k上面的回答指出了我正确的方向。对于其他任何绊倒这个问题的人来说,我使用{{outlet}}时会出现错误。我的原始应用程序模板具有以下结构:
{{#if isAuthenticated}}
<div>
... (Nav etc)
</div>
{{outlet}}
{{else}}
{{outlet}}
{{/if}}
这样做的结果是,一旦isAuthenticated
为真,模板就会被重新渲染,用于识别登录表单元素的脚本标签不再有效 - 因此它们不会被删除。
简单的解决方案是将模板更改为:
{{#if isAuthenticated}}
<div>
... (Nav etc)
</div>
{{/if}}
{{outlet}}