摘要：就沒必要動牛刀，創建一個數據庫了執行完后，在目錄下創建一個程序，自動植入到當前項目中，訪問的和與訪問域名端口一致。就沒必要動牛刀，創建一個數據庫了本篇博文將為你介紹如何使用實現權限控制，我會創建一個簡單的登錄示例加以說明。

文章來源：http://blog.ddlisting.com

官網對于登錄、用戶權限的介紹只有一段簡單的說明，并沒有詳細說明如何使用service實現權限控制。下面地址是官網的說法：

https://guides.emberjs.com/v2.6.0/applications/services/

An Ember.Service is a long-lived Ember object that can be made available in different parts of your application.
Services are useful for features that require shared state or persistent connections. Example uses of services might include:

User/session authentication.

Geolocation.

WebSockets.

Server-sent events or notifications.

Server-backed API calls that may not fit Ember Data.

Third-party APIs.

Logging.

service是啥東西呢？簡單講service也是一個Ember.Object只不過這個對象與普通的對象有點不一樣。首先這種對象是放在文件夾appName/app/services目錄下。其次放在這個目錄下的對象Ember會自動注冊（registered）或者注入（injection）到Ember項目中。這種對象有如下2個特點

對象聲明周期是session級別的

在Ember項目的任何地方都可以調用

正是基于這兩個特性才能實現權限的控制。最簡單的例子就是用戶的登錄問題。目前也有現成的插件實現權限的控制，請看使用ember-simple-auth實現Ember.js應用的權限控制所描述的方法，但是如果要根據自己項目需要去實現權限控制那么又如何做呢？

本篇博文將為你介紹如何使用service實現權限控制，我會創建一個簡單的登錄示例加以說明。如有不妥歡迎留言指正。

ember new secretcodez
cd secretcodez
ember s

驗證項目是否創建成功http://localhost:4200。看到Welcome to Ember說明項創建成功。下面創建演示所需文件。

ember g route secret
ember g route login
ember g route application

ember g component secret-page
ember g component login-page

ember g model code description:string

ember g adapter application

項目演示用到的文件基本就這些。

{{! app/templates/secret.hbs }}
{{secret-page model=model}}

{{! app/tempalates/components/secret-page.hbs}}
secret page


    {{#each model as |code|}}
    

        {{code.description}}
    
    {{/each}}

為了測試創建一個簡單的后端服務程序，使用的是Node，然后寫死一些測試數據。就沒必要動牛刀，創建一個數據庫了！

ember g server
npm install
npm install body-parser --save-dev

執行完ember g server后，在APP目錄下創建一個nodejs程序，自動植入到當前項目中，訪問的domain和port與ember訪問域名端口一致。

打開index.js編輯后端請求監聽。

// server/index.js

const bodyParser = require("body-parser");

module.exports = function(app) {

  app.use(bodyParser.urlencoded({ extended: true }));

  app.get("/api/codes", function (req, res) {    
    return res.status(200).send({
          codes: [
              { id:1, description: "為了測試創建一個簡單的后端服務程序，使用的是Node，然后寫死一些測試數據。就沒必要動牛刀，創建一個數據庫了！" },
              { id:2, description: "本篇博文將為你介紹如何使用service實現權限控制，我會創建一個簡單的登錄示例加以說明。如有不妥歡迎留言指正。" }
          ]
      });
  });

};

既然用到自己的后端服務那么對應的你就需要自定義適配器了。簡單起見就創建RESTAdapter適配器吧。JSONAPIAdapter適配器相對麻煩點，需要格式化數據為json api。

// app/adapters/application.js

export default DS.RESTAdapter.extend({
  namespace: "api"
});

使用屬性namespace指定URL前綴，比如請求URL為http://localhost:4200/api/codes，自動在請求上加入前綴api。

修改路由，獲取后端數據。

// app/routes/secret.js

export default Ember.Route.extend({
  model() {
    // 返回后端數據，這些數據直接從 server/index.js 獲取
    return this.store.findAll("code");
  }
});

重新啟動項目。檢查項目是否有錯誤！如果啟動沒問題，那么訪問http://localhost:4200/secret你也會得到如下截圖的效果。

從截圖中可以看到發送一個請求http://localhost:4200/api/codes，并且從這個請求中獲取到服務端返回的數據。你可以直接把這個URL放到瀏覽器地址欄執行，可以清楚的看到返回的數據。數據的格式是普通的json格式。

目前的效果是任何人都可以訪問，還沒實現權限控制的效果。那么如何去實現呢？不知道你是否看過前面的文章adapter與serializer使用示例，如果你看過里面有介紹過在請求頭加驗證信息這個小結。如果我也想這么實現控制訪問API的權限如何做呢？

// 攔截 /api/codes 請求
app.get("/api/codes", function(req, res) {
    //獲取數據之前先校驗請求者是否有權訪問資源
    //  做一個非常簡單的判斷，如果請求的頭信息不等于BLOG.DDLISTING.COM則認為無權限
    if (req.headers["authorization"] !== "BLOG.DDLISTING.COM") {
        return res.status(403).send("您無權訪問此資源！")
    }
    // 直接返回正確狀態和測試數據
    return res.status(200).send({
        codes: [
            { id:1, description: "為了測試創建一個簡單的后端服務程序，使用的是Node，然后寫死一些測試數據。就沒必要動牛刀，創建一個數據庫了！" },
            { id:2, description: "本篇博文將為你介紹如何使用service實現權限控制，我會創建一個簡單的登錄示例加以說明。如有不妥歡迎留言指正。" }
        ]
    });
})

注意：_代碼只列出主要部分，其他的不變。_
在代碼中加入了簡單的權限校驗，通常authorization的值應該是變化的或者是每個用戶都是唯一的，比如oauth2中的access token。當你再次訪問之前的資源http://localhost:4200/secret可以看到，報錯了，提示無權訪問。如下截圖：

顯然這樣的校驗是沒啥意義的，那么如果你也想模擬Oauth2也生成一個唯一的access token，你可以請求之前首先獲取一個access token。但是這個access token不是隨便就能獲取的，需要通過登錄成功后才能獲取到。下面加入模擬登錄的程序。仍然是修改server/index.js。

// 登錄
app.post("/api/login", function(req, res) {
    //判斷用戶名和密碼是否正確，這里就直接判斷字符串了，實際中通常是通過查詢數據去判斷登錄的用戶是否存在
    if (req.body.username === "blog.ddlisting.com"
      && req.body.password === "yes") {
          res.send({ access_token: "BLOG.DDLISTING.COM" });
      } else {
          res.status(400).send({ error: "獲取token錯誤！" });
      }
});

有了后端的服務之后顯然我們需要在前端增加一個登錄的表單，提供用戶登錄并且登錄成功之后還要把獲取到的access_token保存好，在發送請求的時候設置到請求的頭。這個時候就需要用到service了！！

{{! app/templates/login.hbs 登錄}}
{{login-page}}

{{! app/templates/components/login-page.hbs 登錄表單}}

{{link-to "點擊查看有權才能訪問的資源" ’secret}}

登錄

    默認的用戶名和密碼為：blog.ddlisting.com/yes



    {{input type="text" value=username placeholder="blog.ddlisting.com"}}
    {{input type="password" value=password placeholder="密碼"}}
    

    登錄

在組件類中添加處理登錄的action。

// app/components/login-page.js

import Ember from "ember";

export default Ember.Component.extend({
    authManager: Ember.inject.service(),  //注入servi"auth-manager"ce
    actions: {
        authenticate() {
            const { username, password } = this.getProperties("username", "password");
            //調用service類中的authenticate方法校驗登錄的用戶
            this.get("authManager").authenticate(username, password),then(() => {
                console.log("登錄成功");
            }, (err) => {
                console.log("登錄失敗");
            });
        }
    }
});

在這個類中使用了service類，并且調用此類中的authenticate方法。代碼中的屬性authManager就是一個service實例。下面定義service類。

ember g service auth-manager

// app/serivces/auth-manager.js

import Ember from "ember";

export default Ember.Service.extend({
    accessToken: null,

    // 判斷accessToken是否是空
    isAuthenticated: Ember.computed.bool("accessToken"),

    // 發起請求校驗登錄用戶
    authenticate(username, password) {
        return Ember.$.ajax({
            method: "post",
            url: "/api/login",
            data: { username: username, password: password }
        }).then((res) => {
            // 設置返回的access_token到service類的屬性中
            this.set("accessToken", res.access_token);
        }, (err) => {
            //登錄失敗
        });
    },
    invalidate() {
        this.set("accessToken", null);
    }
});

在組件類login-page.js中并沒有直接發請求校驗用戶是否登錄成功，而是通過調用serivce類的方法去校驗，目的是為了把返回的值保存到service的屬性中，這也是利用它的特性。方法invalidate的目的是執行退出登錄操作，把保存到service屬性中的值置空，使得計算屬性isAuthenticated返回false。

一切都定義好了下面就是如何使用這個service屬性了！修改適配器的代碼，在請求頭中加入accessToken。

// import JSONAPIAdapter from "ember-data/adapters/json-api";
import DS from "ember-data";

// 不使用默認適配器JSONAPIAdapter，而是使用RESTAdapter
export default DS.RESTAdapter.extend({
    namespace: "api",  //訪問請求前綴： http://localhost:4200/api/codes
    // 加入請求頭
    authManager: Ember.inject.service("auth-manager"),
    headers: Ember.computed("authManager.accessToken", function() {
        //動態返回accessToken的值
        return {
            "authorization": `${this.get("authManager.accessToken")}`
        };
    })
});

到此代碼基本寫完了，為了處理服務端返回的錯誤直接在application路由中攔截error事件，在這個事件中處理錯誤的情況。
說明：所有的子路由的error事件都會自動冒泡到路由application的error事件中。

// app/routes/application.js
import Ember from "ember";

export default Ember.Route.extend({
    actions: {
        // 處理所有的error事件
        error(reason, transition) {
            //如果出現錯誤直接轉到登錄界面
            this.transitionTo("login");
            return false;
        }
    }
});

項目重啟完畢(是手動終止在啟動，否則會出現service未定義的情況)之后可以看到界面直接跳轉到了登錄頁面，實現了簡單的權限攔截（無權先登錄）。

未登錄直接點擊鏈接“點擊查看有權才能訪問的資源”效果

可以看到瀏覽器控制臺打印信息顯示資源無權訪問，返回的代碼是403。

輸入錯誤的用戶名或密碼的情況：

登錄成功再訪問授權資源

登錄成功之后再點擊鏈接可以正常訪問了，并且正確看到后端返回的數據。

即使你點擊鏈接“點擊查看有權才能訪問的資源”也還是會跳轉回登錄頁面。那么開始測試登錄后的效果，在表單中輸入正確的用戶名和密碼。點擊登錄后跳轉到了

有登錄就會有退出，退出相對簡單，只要銷毀了service類中的屬性accessToken值即可。

{{! app/tempalates/components/secret-page.hbs}}
secret page


    {{#each model as |code|}}
    

        {{code.description}}
    
    {{/each}}







退出

// app/components/secret-page.js
import Ember from "ember";

export default Ember.Component.extend({
    //注入service
    authManager: Ember.inject.service("auth-manager"),

    actions: {
        invalidate() {
            this.get("authManager").invalidate();  //退出登錄狀態
            //暫時粗暴處理，直接強制刷新，重新進入application路由觸發error事件，再次判斷是否登錄
            location.reload();
        }
    }
});

對于退出事件的處理就比較簡單粗暴了，直接刷新頁面，由于屬性authManager的值已經設置為null所以發起請求的時候是無權限的會再次觸發error事件，然后跳轉到登錄頁面。

到這里，基本上實現了一個簡單的權限控制功能。例子比較簡單，但是處理的思路大體上是這樣做的，能實現這樣的功能是基于service類的特性。也希望讀者能通過本例理解懂得如何使用service。

項目代碼：https://github.com/ubuntuvim/secretcodez，有疑問歡迎給我留言。
您的支持是我繼續寫作的最大動力，謝謝！！