使用 ember-simple-auth 實現 Ember.js 應用的權限控制

joyqi 發布于2019-08-19 18:24 / 989人閱讀

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

很多網站都有登錄功能，對于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。

升級步驟：

修改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升級。修改這兩個文件后執行命令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: -------------------------------

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

安裝插件ember-simple-auth

直接使用npm命令安裝，安裝的方法可以參考官方教程，直接在項目目錄下運行ember install ember-simple-auth即可完成安裝。可以在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提供的方法。此方法會自動根據用戶實現的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 }}


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

{{#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;
            //  返回一個隨機的字符串
            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}}
    
        You can {{#link-to "login" className="alert-link"}}log in {{/link-to}} with login ember and password 123.
    
{{/unless}}

但是用戶名和密碼為什么是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轉到登陸界面。

下面是演示效果

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

用戶名和密碼不匹配

登陸成功的情況

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

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

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

參考文章

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/

如果發現連接無法訪問，那么你可能需要fanqiang

云服務器 GPU云服務器多應用權限控制 ember.js ember.js介紹版本控制git的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79561.html

使用service實現登錄、權限控制

摘要：就沒必要動牛刀，創建一個數據庫了執行完后，在目錄下創建一個程序，自動植入到當前項目中，訪問的和與訪問域名端口一致。就沒必要動牛刀，創建一個數據庫了本篇博文將為你介紹如何使用實現權限控制，我會創建一個簡單的登錄示例加以說明。文章來源：http://blog.ddlisting.com 官網對于登錄、用戶權限的介紹只有一段簡單的說明，并沒有詳細說明如何使用service實現權限控制。下面...

Aomine 2019-08-19 18:32 評論0 收藏0
Day 19: EmberJS 入門指南

摘要：在文件夾內創建，內容如下創建，內容如下使用安裝依賴在的頭部加入調用命令，同時在你的默認瀏覽器中打開。最后，我們更新下，給每個報道添加鏈接修改完畢地后，可以在瀏覽器中直接看到結果。編者注：我們發現了有趣的系列文章《30天學習30種新技術》，正在翻譯，一天一篇更新，年終禮包。下面是第19天的內容。到目前為止，我們這一系列文章涉及了Bower、AngularJS、GruntJS、P...

awesome23 2019-08-19 14:29 評論0 收藏0
[Tips on Ember 2] UI 布局與應用狀態的關系處理

摘要：如果說傳統的前端開發是以頁面為中心來入手的話，那么現代的應用開發就是以狀態為中心來著手設計和開發的。初步分析路由是怎么管理狀態的復雜的話題簡單說在中，應用的每一個可能的狀態都是通過體現的。引子 SPA（單頁面應用）的核心是什么？自該類型應用誕生以來我最多思考的問題就是這個。現在前端 SPA 框架滿天飛，許多不是框架的也被稱作框架，究竟有什么代表性的層（layer）能讓一個系統稱得上...

wayneli 2019-08-21 10:39 評論0 收藏0
Ember.js第七章——測試

摘要：集成測試集成測試是處于單元測試和驗收測試之間的測試。集成測試目的是驗證客戶端與全系統交互，所有單元測試，以及微觀層面具體代碼的算法邏輯是否都能通過。集成測試用來驗證應用程序各個模塊相互關系，比如若干個控件之間的行為。測試簡介測試是Ember。js框架開發環節中很重要的一環。現在假設你正在利用Ember框架開發一個博客系統，這個系統包含user和post模型，有登錄及創建博客的操作...

iliyaku 2019-08-22 10:39 評論0 收藏0
引入計算屬性、action、動態內容

摘要：文章來源引入計算屬性動態內容美化主頁，增加郵件輸入框在主頁中增加一個的，在這個組件中增加一個輸入框和一個按鈕。如果是這種方式，輸入框的值默認一直都是，并且在控制器中不能使用屬性獲取值。文章來源：引入計算屬性、action、動態內容美化主頁，增加郵件輸入框在主頁中增加一個Bootstrap的jumbotron，在這個jumbotron組件中增加一個input輸入框和一個button...

Betta 2019-08-19 18:22 評論0 收藏0