PandaJS 使用说明(1.7):权限控制和数据校验
程序员文章站
2022-03-02 11:11:12
...
PandaJS 使用说明(1.7):权限控制与数据校验
利用上一篇文章提到的 proxy 对象,我们还可以实现权限控制和数据校验。
权限控制的思路是截获对 page.* 和 api.* 的调用,并利用 session 中记录的用户角色信息进行权限检查;
数据校验将重用校验代码,在客户端和服务器端对数据进行双重检查。
权限控制
这里以对 page.* 的调用为例。基本思路是:
1. 通过正则表达式 /^page./ 和 /^api./ 匹配需要拦截的方法调用
2. 获取参数中的 req (ServletHttpRequest)
3. 获取 session 中的用户角色
4. 如果用户的角色是 admin ,则显示相应页面;否则显示登陆页面
(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
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
(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
$(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 表示的是被截获的对象