PandaJS使用說明(1.7):權限控制和數據校驗

PandaJS 使用說明(1.7):權限控制和數據校驗

  利用上一篇文章提到的 proxy 對象,我們還可以實現權限控制和數據校驗。
  權限控制的思路是截獲對 page.* 和 api.* 的調用,並利用 session 中記錄的用戶角色信息進行權限檢查;
  數據校驗將重用校驗代碼,在客戶端和服務器端對數據進行雙重檢查。

權限控制

  這裡以對 page.* 的調用為例。基本思路是:
  1. 通過正則表達式 /^page./ 和 /^api./ 匹配需要攔截的方法調用
  2. 獲取參數中的 req (ServletHttpRequest)
  3. 獲取 session 中的用戶角色
  4. 如果用戶的角色是 admin ,則顯示相應頁面;否則顯示登陸頁面

Javascript代碼 
(function() { 
    var log = panda.log("proxy.security"); 
 
    proxy.security = { priority: 80 }; 
 
    // 對 page.* 的調用進行權限控制 
    proxy.security.page = { 
        priority: 100, 
        expr: /^page./, 
        func: function(name, method, args) { 
            // 獲取方法的第二個參數,即 req 
            var req = args[1]; 
 
            // 讀取 session 中的role。返回值是 java.lang.String 
            // 加上空字符串轉為 JavaScript 中的 String 
            var role = req.session.getAttribute("user.role") + ""; 
 
            // 如果角色是 "admin",則顯示相應頁面 
            // 否則,顯示登錄頁面 
            if (role === "admin") { 
                return this[method].apply(this, args); 
            } else { 
                log.info("Redirect to login page."); 
                return panda.render("login"); 
            } 
        } 
    } 
 
    // 利用類似的方法對 api.* 的調用進行權限控制,略 
    proxy.security.api = { … } 
}()); 


  簡單起見,這裡僅包含瞭 admin 一種角色。
  除此之外,還需要創建文件 webapp/login.html (登陸頁面) webspp/js/login.js (向服務器發送用戶名和密碼的客戶端 JS ) 和 scripts/api/auth.js(登錄用戶名和密碼驗證),具體內容請查看附件中的相應文件。

  啟動 mongod 和 PandaJS 工程(見附件),輸入http://localhost/,將顯示登錄頁面,在控制臺輸出(或日志)中也可以看到“Redirect to login page.”的提示。
  輸入用戶名和密碼並點擊 Sign in 之後,將顯示用戶列表。

數據校驗

  首先編寫在服務器端和瀏覽器中共用的 validator 對象:

  webapp/js/both/validator.js
Javascript代碼 
validator = {}; 
 
// 校驗異常信息 
validator.USER_INVALID = "Invalid user data."; 
validator.USER_NAME_EMPTY = "Name cannot be empty."; 
validator.USER_NAME_TOO_LONG = "Name cannot be longer than 50."; 
validator.USER_NAME_FORMAT = "Name format is not conrrect."; 
validator.USER_DESC_EMPTY = "Description cannot be empty."; 
validator.USER_DESC_TOO_LONG = "Description cannot be longer than 50."; 
 
// 檢查 user 對象的方法 
validator.validateUser = function(user) { 
    // 參數類型錯誤,可能是惡意攻擊 
    if (typeof user.name !== "string" 
            || typeof user.desc !== "string") { 
        return { success: false, error: validator.USER_INVALID }; 
    } 
 
    // name 為空 
    if (!user.name) { 
        return { success: false, error: validator.USER_NAME_EMPTY }; 
    } 
 
    // name 過長 
    if (user.name.length > 50) { 
        return { success: false, error: validator.USER_NAME_TOO_LONG }; 
    } 
 
    // name 格式檢查 
    if (!/^[A-z][A-z0-9._]*$/.test(user.name)) { 
        return { success: false, error: validator.USER_NAME_FORMAT }; 
    } 
 
    // desc 為空 
    if (!user.desc) { 
        return { success: false, error: validator.USER_DESC_EMPTY }; 
    } 
 
    // desc 過長 
    if (user.desc.length > 50) { 
        return { success: false, error: validator.USER_DESC_TOO_LONG }; 
    } 
 
    // 提取 name 和 desc;因為對象中可能還有其他不需要的屬性 
    var data = { name: user.name, desc: user.desc } 
    return { success: true, data: data }; 

  這段代碼在服務器端的 proxy.validation 對象 和 瀏覽器端的 save(…) 中被用到。
  客戶端的校驗是為瞭給用戶更快的反饋,服務器端的校驗是為瞭避免惡意攻擊。
  代碼實現如下:

  scripts/app/proxy/validation.js
Javascript代碼 
(function() { 
    var log = panda.log("proxy.validation"); 
 
    proxy.validation = { priority: 60 }; 
 
    // 創建或更新 user 時,檢查 user 數據 
    proxy.validation.saveUser = { 
        priority: 100, 
        expr: /^dbo.users.(add|update)$/, 
        func: function(name, method, args) { 
            var validated = validator.validateUser(args[0]); 
 
            if (!validated.success) { 
                log.info(validated.error); 
                throw validated.error; 
            } 
 
            args[0] = validated.data; 
 
            return this[method].apply(this, args); 
        } 
    }; 
 
    // 創建 user 時,檢查用戶是否已經存在 
    proxy.validation.addUser = { 
        priority: 80, 
        expr: /^dbo.users.add$/, 
        func: function(name, method, args) { 
            var user = args[0]; 
 
            if (this.exists(user.name)) { 
                var msg = "The user already exists."; 
                log.info(msg); 
                throw msg; 
            } 
 
            return this[method].apply(this, args); 
        } 
    }; 
}()); 


  webapp/js/index.js
Javascript代碼 
$(function(){ 
    // 其他代碼,略 
 
    function save(action, user) { 
        // 驗證 user 數據有效性 
        var validated = validator.validateUser(user); 
 
        if (!validated.success) { 
            $("#error").html(validated.error).show();    
            return; 
        } 
 
        // 向服務器端發送請求 
        var req = { action: action, params: validated.data }; 
        panda.post(req, show, function(error){ 
            $("#error").html(error).show();  
        }); 
    } 
 
    function show(users) { … } 
}); 

  可以看到,檢查輸入是否為空和檢查輸入參數長度、格式的部分是共用的,但檢查用戶是否存在的邏輯隻存在於服務器端的 proxy 對象。
  另外,proxy 對象的 func 中 的 this 表示的是被截獲的對象,因此我們可以在 proxy.validation.saveUser 中調用 dbo.exists(name) 來檢查用戶是否已經存在。
  此外,還需要實現 dao.users.exists(name) 方法,並在 index.html 中添加對 webapp/js/both/validator.js 的引用,詳細內容請查看附件中的相應文件。

小結

  1. 我們可以利用 proxy 對象攔截方法的調用,進行權限和數據的檢查
  2. 我們可以將服務器和瀏覽器端共用的代碼放在 both 目錄下
  3. proxy 對象的 func 中 的 this 表示的是被截獲的對象

 

本文出自“裴小星的博客”
 

You May Also Like