运用embersimpleauth完成Ember.js运用的权限掌握

许多网站都有登录功用，关于Ember的运用我们怎样完成权限的掌握呢？本篇将为你演示一个最经常运用的权限掌握例子：用户登录。

要完成登录最经常运用的体式格局是经由过程推断session值，假如session中存在你所需要的值则能够以为是用户是经由了登录而且把用户信息设置到session了，假如session中没有用户信息则以为用户没有登录，直接跳转到登录或许注册页面。

本篇会引入一个特地用于掌握权限的插件ember-simple-auth，文章中大部份代码是直接参考这个插件的文档所写。假如你需要项目的代码请移步github下载。

好了，废话少说，直接放码出来吧。

建立Ember运用

本文会运用Ember CLI称号建立项目和项目所需的文件，更多有关Ember CLI的敕令请自行到官网进修。

ember new chapter8_simple_auth
cd chapter8_simple_auth
ember server

假如你的项目搭建胜利实行http://localhost:4200，会看到Welcome to Ember，申明项目搭建胜利。

晋级Ember、Jquery版本

本项目会晋级Ember版本，现在(_2015-11-18_)来讲假如是运用Ember CLI敕令装置的项目Ember的版本是1.13.7。晋级后运用的版本是2.0.0-beta.3。

晋级步骤：

1. 修正bower.json
   修正后此文件重要的代码以下：

   {
"dependencies": {
"ember": "2.0.0-beta.3"
},
"resolutions": {
"ember": "2.0.0-beta.3"
}
}

2. 删除原有的Ember
   必需要手动删除原有的版本，不然由于缓存的题目运用敕令从新装置的时刻能够装置不胜利。手动删除以下目次：appName/bower_components/ember

3. 装置新版本Ember
   运用敕令：bower install，从新装置Ember。

4. 搜检是不是装置胜利。
   翻开appName/bower_components/ember/ember.js，能够看到Ember是谁人版本。假如是2.0.0-beta.3申明晋级胜利。

5. 一样的体式格局晋级Jquery
   假如你晋级不胜利，你能够参考我的项目的bower.json、package.json晋级。修正这两个文件后实行敕令bower install晋级。

6. 重启项目
   能够看到浏览器掌握台打印出Ember的版本信息。

   2015-11-18 23:54:08.902 ember.debug.js:5202 DEBUG: -------------------------------
2015-11-18 23:54:08.916 ember.debug.js:5202 DEBUG: Ember : 2.0.0-beta.3
2015-11-18 23:54:08.916 ember.debug.js:5202 DEBUG: jQuery : 2.1.4
2015-11-18 23:54:08.917 ember.debug.js:5202 DEBUG: -------------------------------

到此项目的晋级事情完成。

装置插件ember-simple-auth

直接运用npm敕令装置，装置的要领能够参考官方教程，直接在项目目次下运转ember install ember-simple-auth即可完成装置。能够在appName/bower_components看到装置的插件。

项目重要代码文件

首页模板文件

{{! app/templates/application.hbs }}


This is my first auth proj

session.isAuthenticated是插件ember-simple-auth封装好的属性，假如没有登录isAuthenticated为false，sessionRequiresAuthentication也是插件ember-simple-auth供应的要领。此要领会自动依据用户完成的authenticate要领校验用户是不是已登录（isAuthenticated为true）。

定义登录、登录胜利组件

运用Ember CLI建立两个组件：login-form和get-quotes。

ember g component login-form
ember g component get-quotes

离别编写这两个组件和组件对应的模板文件。

login-form.js

// app/components/login-form.js
import Ember from 'ember';
export default Ember.Component.extend({
// authenticator: 'authenticator: custom',
actions: {
authenticate: function() {
var user = this.getProperties('identification', 'password');
this.get('session').authenticate('authenticator:custom', user).catch((msg) => {
this.set('errorMessage', msg);
});
}
}
});

个中authenticator属性实行了一个自定义的身份考证器custom。identification和password是页面输入的用户名和暗码。

getProperties要领会自动猎取属性值并自动组装成hash情势（{key: value}情势）。msg是要领authenticate考证不经由过程的提醒信息。

在此简朴处置惩罚，直接放回到界面显现。

login-form.hbs

{{! app/templates/login-form.hbs }}



这个文件比较简朴没什么好说，errorMessage就是组件类中返回的提醒信息。

get-quotes.js

// app/components/get-quotes.js
import Ember from 'ember';
export default Ember.Component.extend({
gotQuote: false,
quote: "",
actions: {
getQuote: function() {
var that = this;
// 返回一个随机的字符串
Ember.$.ajax({
type: 'GET',
// url: 'http://localhost:3001/api/protected/random-quote',
url: 'http://localhost:3001/api/random-quote',
success: function(response) {
that.setProperties({ quote: response, gotQuote: true });
},
error: function(error) {
alert("An error occurred while processing the response.");
console.log(error);
}
});
}
}
});

此组件模仿上岸以后才接见的资本，经由过程Ajax猎取一个随机的字符串。
请求的效劳代码你也能够从github上下载，下载以后根据文档装置，直接运转node server.js既可，效劳器端是一个nodejs顺序，假如你的电脑没有装置nodejs，请自行下载装置。

上岸、信息显现页面

这两个页面比较简朴，直接挪用组件。为何我没有直接把组件代码放在这两个页面呢？？我们晓得Ember2.0以后官方不引荐运用掌握器，掌握器的作用在弱化，组件变得越来越重要。

既然我们项目运用的是Ember2.0版本那就必需要用组件去替换掌握器完成某些逻辑的推断。

{{! app/templates/login.hbs }}
{{login-form}}

{{! app/templates/protected.hbs }}
{{get-quotes}}

上岸前的提醒信息

我们直接把上岸运用的用户名和暗码提醒出来，为了测试轻易嘛，再者项目还没有注册功用。

{{! app/templates/index.hbs }}
{{#unless session.isAuthenticated}}


然则用户名和暗码为何是ember和123呢？？你看到效劳器代码里的user-routes.js就邃晓了，github上用的是gonto，我下载以后做了点小修正。你能够修正成你喜好的字符串。

到此通例的文件就建立完成了，下面的内容才是重头戏。到现在为止我们还没运用过任何有关插件ember-simple-auth的内容。

路由设置

ember g route login
ember g route protected
ember g route application

实行敕令的时刻要注重别把之前的模板覆蓋了！！！下面是这几个文件的内容。

application.js

// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
actions: {
invalidateSession: function() {
this.get('session').invalidate();
}
}
});

这个类起首夹杂了ApplicationRouteMixin类的特征，然后再加上自定义的特征。注重第二行代码，引入了插件ember-simple-auth的类ApplicationRouteMixin。更多有关这个类的引见请点击链接检察。session是插件内置的属性。要领invalidate设置session为无效或许说是当前认证无效，更多详细信息请看要领的API引见。

protected.js

// app/routes/protected.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
// 完成AuthenticatedRouteMixin的类会自动依据权限过滤，假如经由登录页面直接进入这个route会自动跳转到登录页面
export default Ember.Route.extend(AuthenticatedRouteMixin, {
});

此类也是引入插件ember-simple-auth封装好的类AuthenticatedRouteMixin。夹杂了此类的类会自动依据权限过滤，假如没有经由过程认证而直接接见这个route会被强迫跳转到登录页面。

login.js

// app/routes/login.js
import Ember from 'ember';
export default Ember.Route.extend({
// 清空提醒信息
setupController: function(controller, model) {
console.log("route:login model = " + model);
controller.set('errorMessage', null);
}
});

这个route的作用是清空页面的提醒信息，假如不清空你再次进入的时刻照样会看到提醒信息。

掌握器设置

路由protected之所以能完成无权限重定向到登录页面是由于在controller:login中指定了登录处置惩罚类。

login.js

// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
});

此类引入插件封装好的登录处置惩罚类LoginControllerMixin，遗憾的是在插件目次下并没有发明这个类，看不到里面的完成！

中心处置惩罚类

末了的这两个类是悉数项目最中心的东西——自定义校验器、受权者。

受权者类 authorizer/custom.js

// app/authenrizers/custom.js
import Ember from 'ember';
import Base from 'simple-auth/authorizers/base';
export default Base.extend({
authorize: function(jqXHR, requestOptions) {
var accessToken = this.get('session.content.secure.token');
if (this.get('session.isAuthenticated') && !Ember.isEmpty(accessToken)) {
// setRequestHeader要领自定义请求头信息：键为Authorization，值为Ember+accessToken
// 有关这个要领的引见请看[API引见](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)
jqXHR.setRequestHeader('Authorization', 'Ember' + accessToken);
}
}
});

直接继续Base类，从新完成authorize要领。或许你亦能够像github上的教程运用插件已定义好的类。
authorize要领第一个参数是需要设置的session数据，第二个参数是一个回调函数，更多概况状况接口API。

考证器类 authenticators/custom.js

// app/authenticators/custom.js
import Ember from 'ember';
import Base from 'simple-auth/authenticators/base';
export default Base.extend({
tokenEndpoint: 'http://localhost:3001/sessions/create',
restore: function(data) {
return new Ember.RSVP.Promise(function(resolve, reject) {
if (!Ember.isEmpty(data.token)) {
resolve(data);
} else {
reject();
}
});
},
authenticate: function(options) {
return new Ember.RSVP.Promise((resolve, reject) => {
Ember.$.ajax({
url: this.tokenEndpoint,
type: 'POST',
data: JSON.stringify({
username: options.identification,
password: options.password
}),
contentType: 'application/json;charset=utf-8',
dataType: 'json'
}).then(function(response) {
Ember.run(function() {
resolve({
token: response.id_token
});
});
}, function(xhr, status, error) {
var respOnse= xhr.responseText;
Ember.run(function() {
reject(response);
});
});
});
},
invalidate: function() {
console.log('invalidate...');
return Ember.RSVP.resolve();
}
});

这个类代码比较多，也比较复杂。现在官方供应了三种经常运用的考证器。

然则本项目运用的自定义的考证器。需要注重的是自定义的考证器需要完成restore、authenticate、invalidate这个三个要领，末了一个要领不强迫请求重写，然则前面两个要领必需重写。从代码完成能够看到这几个要领都返回了Promise对象。

代码起首是实行了Ajax请求http://localhost:3001/sessions/create，假如实行胜利则返回token，不然返回失足信息，返回的错误信息能够在user-routes.js上看到，下载代码后你能够修正成本身喜好的提醒信息。

修正项目设置

到此项目的重要代码都已完成了，下面为了项目能一般运转还需要修正项目的设置文件config/environment.js。

/* jshint node: true */
module.exports = function(environment) {
var ENV = {
// ……与原文件一样
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self'",
'font-src': "'self' *",
'connect-src': "'self' *", // Allow data (ajax/websocket) from http://localhost:3001
'img-src': "'self'",
'style-src': "'self' 'unsafe-inline' *", // Allow inline styles
'media-src': "'self'"
}
};
ENV['simple-auth'] = {
store: 'simple-auth-session-store:local-storage',
authorizer: 'authorizer:custom',
crossOriginWhitelist: ['http://localhost:3001/'], // Ajax跨域设置
// routeAfterAuthentication: '/', //登录胜利后跳转到的页面
authenticationRoute: 'login' // 登录不胜利转回登录页面
};
// ……与原文件一样
return ENV;
};

没有列出的代码与默许天生的代码是一致的。

末了重启项目测试结果。

起首我们直接接见 http://localhost:4200/protected，能够看到直接被重定向到http://localhost:4200/login(条件是你还没上岸过)。然后再接见 http://localhost:4200 进入到项目首页。能够看到提醒上岸的用户名和暗码。然后点击login转到上岸界面。

下面是演示结果

1. 没有输入用户、暗码
   假如没有输入用户名或许暗码个中之一，或许都不输入就点击login，会涌现如图提醒信息。你也能够看浏览器掌握台打印的日记信息，能够看到返回的状况码为400，这个状况码也是在user-routes.js中设置的。

2. 上岸胜利的状况
   

能够看到浏览器URL转到http://localhost:4200/protected。然后点击按钮&＃8221;Get Random quote&＃8221;，能够看到返回随机的字符串。

每点击一次就发送一次请求http://localhost:3001/api/random-quote，请求返回一个随机的字符串。

到此，运用插件ember-simple-auth完成ember运用的权限掌握的内容悉数终了终了，列位读者们不晓得你们是不是看得邃晓，假如以为文章将不对的处所迎接给我留言，假如你以为作者大午夜写文章精神可嘉也迎接给我点个赞吧 =_=！！

参考文章

1. https://github.com/simplabs/ember-simple-auth

2. http://ember-simple-auth.com/api/index.html

3. http://www.programwitherik.com/ember-simple-auth-torii-example-application/

4. https://auth0.com/blog/2015/06/26/auth0-ember-simple-auth/

假如发明衔接无法接见，那末你能够需要fanqiang