摘要：很多網(wǎng)站都有登錄功能，對于的應(yīng)用我們怎么實現(xiàn)權(quán)限的控制呢本篇將為你演示一個最常用的權(quán)限控制例子用戶登錄。升級后使用的版本是。修改這兩個文件后執(zhí)行命令升級。到目前為止我們還沒使用過任何有關(guān)插件的內(nèi)容。目前官方提供了三種常用的驗證器。

很多網(wǎng)站都有登錄功能，對于Ember的應(yīng)用我們怎么實現(xiàn)權(quán)限的控制呢？本篇將為你演示一個最常用的權(quán)限控制例子：用戶登錄。

要實現(xiàn)登錄最常用的方式是通過判斷session值，如果session中存在你所需要的值則可以認(rèn)為是用戶是經(jīng)過了登錄并且把用戶信息設(shè)置到session了，如果session中沒有用戶信息則認(rèn)為用戶沒有登錄，直接跳轉(zhuǎn)到登錄或者注冊頁面。

本篇會引入一個專門用于控制權(quán)限的插件ember-simple-auth，文章中大部分代碼是直接參考這個插件的文檔所寫。如果你需要項目的代碼請移步github下載。

好了，廢話少說，直接放碼出來吧。

本文會使用Ember CLI名稱創(chuàng)建項目和項目所需的文件，更多有關(guān)Ember CLI的命令請自行到官網(wǎng)學(xué)習(xí)。

ember new chapter8_simple_auth
cd chapter8_simple_auth
ember server

如果你的項目搭建成功執(zhí)行http://localhost:4200，會看到Welcome to Ember，說明項目搭建成功。

本項目會升級Ember版本，目前(_2015-11-18_)來說如果是使用Ember CLI命令安裝的項目Ember的版本是1.13.7。升級后使用的版本是2.0.0-beta.3。

升級步驟：

修改bower.json
修改后此文件主要的代碼如下：

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

刪除原有的Ember
必須要手動刪除原有的版本，否則因為緩存的問題使用命令重新安裝的時候可能安裝不成功。手動刪除如下目錄：appName/bower_components/ember

安裝新版本Ember
使用命令：bower install，重新安裝Ember。

檢查是否安裝成功。
打開appName/bower_components/ember/ember.js，可以看到Ember是那個版本。如果是2.0.0-beta.3說明升級成功。

同樣的方式升級Jquery
如果你升級不成功，你可以參考我的項目的bower.json、package.json升級。修改這兩個文件后執(zhí)行命令bower install升級。

重啟項目
可以看到瀏覽器控制臺打印出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: -------------------------------

到此項目的升級工作完成。

直接使用npm命令安裝，安裝的方法可以參考官方教程，直接在項目目錄下運行ember install ember-simple-auth即可完成安裝?？梢栽?b>appName/bower_components看到安裝的插件。

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

This is my first auth proj

{{#if session.isAuthenticated}}
    

        Logout
    
{{else}}
    

        Login
    
{{/if}}

{{outlet}}

session.isAuthenticated是插件ember-simple-auth封裝好的屬性，如果沒有登錄isAuthenticated為false，sessionRequiresAuthentication也是插件ember-simple-auth提供的方法。此方法會自動根據(jù)用戶實現(xiàn)的authenticate方法校驗用戶是否已經(jīng)登錄（isAuthenticated為true）。

使用Ember CLI創(chuàng)建兩個組件：login-form和get-quotes。

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

分別編寫這兩個組件和組件對應(yīng)的模板文件。

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屬性執(zhí)行了一個自定義的身份驗證器custom。identification和password是頁面輸入的用戶名和密碼。

getProperties方法會自動獲取屬性值并自動組裝成hash形式（{key: value}形式）。msg是方法authenticate驗證不通過的提示信息。

在此簡單處理，直接放回到界面顯示。

login-form.hbs

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


    

        Login
        {{input value=identification placeholder="enter your name" class="form-control"}}
    
    

        Login
        {{input value=password placeholder="enter password" class="form-control" type="password"}}
    
    Login

{{#if errorMessage}}
    

        Login failed: {{errorMessage}}
    
{{/if}}

這個文件比較簡單沒什么好說，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;
            //  返回一個隨機(jī)的字符串
            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獲取一個隨機(jī)的字符串。
請求的服務(wù)代碼你也可以從github上下載，下載之后按照文檔安裝，直接運行node server.js既可，服務(wù)器端是一個nodejs程序，如果你的電腦沒有安裝nodejs，請自行下載安裝。

這兩個頁面比較簡單，直接調(diào)用組件。為什么我沒有直接把組件代碼放在這兩個頁面呢？？我們知道Ember2.0之后官方不推薦使用控制器，控制器的作用在弱化，組件變得越來越重要。

既然我們項目使用的是Ember2.0版本那就必須要用組件去替代控制器實現(xiàn)某些邏輯的判斷。

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

{{login-form}}

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

{{get-quotes}}

我們直接把登陸使用的用戶名和密碼提示出來，為了測試方便嘛，再者項目還沒有注冊功能。

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

{{#unless session.isAuthenticated}}
    

        You can {{#link-to "login" className="alert-link"}}log in {{/link-to}} with login ember and password 123.
    
{{/unless}}

但是用戶名和密碼為什么是ember和123呢？？你看到服務(wù)器代碼里的user-routes.js就明白了，github上用的是gonto，我下載之后做了點小修改。你可以修改成你喜歡的字符串。

到此常規(guī)的文件就創(chuàng)建完成了，下面的內(nèi)容才是重頭戲。到目前為止我們還沒使用過任何有關(guān)插件ember-simple-auth的內(nèi)容。

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

執(zhí)行命令的時候要注意別把之前的模板覆蓋了！??！下面是這幾個文件的內(nèi)容。

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。更多有關(guān)這個類的介紹請點擊鏈接查看。session是插件內(nèi)置的屬性。方法invalidate設(shè)置session為無效或者說是當(dāng)前認(rèn)證無效，更多詳細(xì)信息請看方法的API介紹。

protected.js

// app/routes/protected.js

import Ember from "ember";

import AuthenticatedRouteMixin from "simple-auth/mixins/authenticated-route-mixin";

// 實現(xiàn)AuthenticatedRouteMixin的類會自動根據(jù)權(quán)限過濾，如果經(jīng)過登錄頁面直接進(jìn)入這個route會自動跳轉(zhuǎn)到登錄頁面
export default Ember.Route.extend(AuthenticatedRouteMixin, {
});

此類也是引入插件ember-simple-auth封裝好的類AuthenticatedRouteMixin?；旌狭舜祟惖念悤詣痈鶕?jù)權(quán)限過濾，如果沒有通過認(rèn)證而直接訪問這個route會被強制跳轉(zhuǎn)到登錄頁面。

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的作用是清空頁面的提示信息，如果不清空你再次進(jìn)入的時候還是會看到提示信息。

路由protected之所以能實現(xiàn)無權(quán)限重定向到登錄頁面是因為在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，遺憾的是在插件目錄下并沒有發(fā)現(xiàn)這個類，看不到里面的實現(xiàn)！

最后的這兩個類是整個項目最核心的東西——自定義校驗器、授權(quán)者。

授權(quán)者類 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
            // 有關(guān)這個方法的介紹請看[API介紹](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)
            jqXHR.setRequestHeader("Authorization", "Ember" + accessToken);
        }
    }
});

直接繼承Base類，重新實現(xiàn)authorize方法?；蛘吣阋嗫梢韵駁ithub上的教程使用插件已經(jīng)定義好的類。
authorize方法第一個參數(shù)是需要設(shè)置的session數(shù)據(jù)，第二個參數(shù)是一個回調(diào)函數(shù)，更多詳情情況接口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();
    }
});

這個類代碼比較多，也比較復(fù)雜。目前官方提供了三種常用的驗證器。

但是本項目使用的自定義的驗證器。需要注意的是自定義的驗證器需要實現(xiàn)restore、authenticate、invalidate這個三個方法，最后一個方法不強制要求重寫，但是前面兩個方法必須重寫。從代碼實現(xiàn)可以看到這幾個方法都返回了Promise對象。

代碼首先是執(zhí)行了Ajax請求http://localhost:3001/sessions/create，如果執(zhí)行成功則返回token，否則返回出錯信息，返回的錯誤信息可以在user-routes.js上看到，下載代碼后你可以修改成自己喜歡的提示信息。

到此項目的主要代碼都已實現(xiàn)了，下面為了項目能正常運行還需要修改項目的配置文件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跨域設(shè)置
        // routeAfterAuthentication: "/",  //登錄成功后跳轉(zhuǎn)到的頁面
        authenticationRoute: "login"  //  登錄不成功轉(zhuǎn)回登錄頁面
  };
  // ……與原文件一樣

  return ENV;
};

沒有列出的代碼與默認(rèn)生成的代碼是一致的。

最后重啟項目測試效果。

首先我們直接訪問 http://localhost:4200/protected，可以看到直接被重定向到http://localhost:4200/login(前提是你還沒登陸過)。然后再訪問 http://localhost:4200 進(jìn)入到項目首頁?？梢钥吹教崾镜顷懙挠脩裘兔艽a。然后點擊login轉(zhuǎn)到登陸界面。

下面是演示效果

沒有輸入用戶、密碼
如果沒有輸入用戶名或者密碼其中之一，或者都不輸入就點擊login，會出現(xiàn)如圖提示信息。你也可以看瀏覽器控制臺打印的日志信息，可以看到返回的狀態(tài)碼為400，這個狀態(tài)碼也是在user-routes.js中設(shè)置的。

用戶名和密碼不匹配

登陸成功的情況

可以看到瀏覽器URL轉(zhuǎn)到http://localhost:4200/protected。然后點擊按鈕"Get Random quote"，可以看到返回隨機(jī)的字符串。

每點擊一次就發(fā)送一次請求http://localhost:3001/api/random-quote，請求返回一個隨機(jī)的字符串。

到此，使用插件ember-simple-auth實現(xiàn)ember應(yīng)用的權(quán)限控制的內(nèi)容全部結(jié)束完畢，各位讀者們不知道你們是否看得明白，如果覺得文章將不對的地方歡迎給我留言，如果你覺得作者大半夜寫文章精神可嘉也歡迎給我點個贊吧 =_=??！

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

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

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

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

如果發(fā)現(xiàn)連接無法訪問，那么你可能需要fanqiang