权限认证模块

Pear Admin v 2.0/admin/data/menu.json

@@ -73,7 +73,15 @@
 				"icon": "layui-icon layui-icon-face-smile",
 				"type": 0,
 				"href": "view/common/message.html",
-				"children": [{
+				"children": [
+					{
+							"id": 216,
+							"title": "权限认证",
+							"icon": "layui-icon layui-icon-face-smile",
+							"type": 1,
+							"openType": "_iframe",
+							"href": "view/common/basic/auth.html"
+						},{
 						"id": 211,
 						"title": "功能按钮",
 						"icon": "layui-icon layui-icon-face-smile",

Pear Admin v 2.0/admin/data/permission.json

@@ -0,0 +1 @@
+["permission-add","permission-remove","permission-edit"]

Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js

@@ -1,4 +1,4 @@
-layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pearNotice','pearFrame'], function(exports) {
+layui.define(['table', 'jquery', 'element', 'form', 'pearAuth','pearTab', 'pearMenu', 'pearNotice','pearFrame'], function(exports) {
 	"use strict";
 
 	var $ = layui.jquery,
@@ -7,7 +7,8 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
 		pearTab = layui.pearTab,
 		pearMenu = layui.pearMenu,
 		pearNotice = layui.pearNotice,
-		pearFrame = layui.pearFrame;
+		pearFrame = layui.pearFrame,
+		pearAuth = layui.pearAuth;
 
 	var bodyFrame;
 	var sideMenu;
@@ -27,6 +28,15 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
 			
 			this.noticeRender(option);
 			
+			this.permissionRender(option);
+
+		}
+
+        this.permissionRender = function(option){
+			
+			if(option.auth!=false){
+			    pearAuth.loadPermission(option.auth);
+		    }
 		}
 
 		this.menuRender = function(option) {

Pear Admin v 2.0/component/layui/lay/extends/pearAuth.js

@@ -5,49 +5,64 @@ layui.define(['table', 'jquery', 'element'], function (exports) {
         $ = layui.jquery,
 		element = layui.element;
 		
-    var pearAuth = function () {
+    var pearAuth = function () {};
-        
-		
-		
-		
-    };
 	
 	/**
 	 * 初始化
 	 * */
-	pearFrame.prototype.initPermission = function (url) {
+	pearAuth.prototype.loadPermission = function (url) {
 	  
+	  	var data = getData(url);
 	   
+		localStorage.setItem("auth_cache", data);
 	} 
 	
 	/**
-	 * 新增权限
+	 * 清除权限
 	 * */
-	pearFrame.prototype.setPermission = function (opt) {
+	pearAuth.prototype.clearPermission = function () {
 	    
+		localStorage.removeItem('auth_cache')
 	} 
 		
-	/**
+	/** 同 步 请 求 获 取 数 据 */
-	 * 清楚权限
+	function getData(url) {
-	 * */
-	pearFrame.prototype.clearPermission = function (opt) {
 	
+		$.ajaxSettings.async = false;
+		var data = null;
+	
+		$.get(url, function(result) {
+			data = result;
+		});
+	
+	    
+		$.ajaxSettings.async = true;
+		return data;
 	}
 	
-	/**
+	var doms = $("*[pear-has-permission]");
-	 * 删除权限
-	 * */
-	pearFrame.prototype.removePermission = function (opt) {
 
+    $.each(doms,function(i,dom){
+		
+	     var permission =  $(dom).attr("pear-has-permission");
+	
+	     var b = false;
+	
+	     $.each(localStorage.getItem("auth_cache").split(","),function(i,auth){
+			 
+			 if(auth == permission){
+				 
+				 b = true;
+				 
+				 return false;
 			 }
 			 
-	/** 
+		 })
-	 * 权限验证
-	 * */
-	
-
-    
 		 
+		 if(!b){
+			 $(dom).hide();
+		 }
+	})
 	
 	exports(MOD_NAME,new pearAuth());
 })

Pear Admin v 2.0/component/layui/layui.js

@@ -53,6 +53,7 @@
 			pearHash:"extends/pearHash",
 			pearAdmin:"extends/pearAdmin",
 			pearFrame:"extends/pearFrame",
+			pearAuth:"extends/pearAuth",
 			pearSocial:"extends/pearSocial",
 			pearNotice:"extends/pearNotice",
 			pearStep:"extends/pearStep",

Pear Admin v 2.0/index.html

@@ -57,12 +57,12 @@
 		<div class="pear-cover"></div>
 
 		<!-- 初始加载 动画-->
-		<div class="loader-main">
+		<div pear-has-permission="loader" class="loader-main">
 			<div class="loader"></div>
 		</div>
 
 		<!-- 聊天组件 -->
-		<div id="social layui-hide-xs"></div>
+		<div pear-has-permission="social" id="social layui-hide-xs"></div>
 
 		<!-- 移动端 的 收缩适配 -->
 		<div class="collaspe pe-collaspe layui-hide-sm">
@@ -70,13 +70,12 @@
 		</div>
 		<script src="component/layui/layui.js"></script>
 		<script>
-			layui.use(['pearAdmin', 'jquery', 'pearSocial', 'layer', 'pearTab', 'pearNotice'], function() {
+			layui.use(['pearAdmin', 'jquery', 'pearSocial', 'layer'], function() {
 				var pearAdmin = layui.pearAdmin;
 				var $ = layui.jquery;
-				var pearTab = layui.pearTab;
-				var pearNotice = layui.pearNotice;
 				var layer = layui.layer;
 				var pearSocial = layui.pearSocial;
+				var pearAuth = layui.pearAuth;
 
 				var config = {
 					keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
@@ -85,7 +84,8 @@
 					theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
 					index: 'view/console/console1.html', // 默 认 加 载 主 页
 					data: 'admin/data/menu.json', // 菜 单 数 据 加 载 地 址
-					notice: 'admin/data/notice.json'
+					notice: 'admin/data/notice.json',
+					auth: 'admin/data/permission.json'  // 前端权限限制，false 关闭该功能
 				};
 
                 var setting = {

Pear Admin v 2.0/view/common/basic/auth.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
+		<link rel="stylesheet" href="../../../admin/css/pearButton.css" />
+		<style>
+			.pear-container {
+				margin: 10px;
+				background-color: whitesmoke;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						权限认证
+					</div>
+					<div class="layui-card-body">
+						<br>
+						<button pear-has-permission="permission-add" class="pear-btn pear-btn-primary"> 新增权限</button>&nbsp;&nbsp; pearmission-add (有权限)
+						<br>
+						<br>
+						<button pear-has-permission="permission-edit" class="pear-btn pear-btn-warming"> 修改权限</button>&nbsp;&nbsp; pearmission-edit (有权限)
+						<br>
+						<br>
+						<button pear-has-permission="permission-remove" class="pear-btn pear-btn-danger"> 删除权限</button>&nbsp;&nbsp; pearmission-remove (有权限)
+						<br>
+						<br>
+						<button pear-has-permission="permission-query" class="pear-btn pear-btn-danger"> 查询权限</button>&nbsp;&nbsp;  pearmission-query (无权限)
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card" pear-has-permission="permission-add">
+					<div class="layui-card-header">
+						有权限卡片 (显示)
+					</div>
+					<div class="layui-card-body">
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card" pear-has-permission="permission-add">
+					<div class="layui-card-header">
+						有权限卡片（显示）
+					</div>
+					<div class="layui-card-body">
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card" pear-has-permission="permission-query">
+					<div class="layui-card-header">
+						有权限卡片
+					</div>
+					<div class="layui-card-body">
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card" pear-has-permission="permission-query">
+					<div class="layui-card-header">
+						有权限卡片
+					</div>
+					<div class="layui-card-body">
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../../component/layui/layui.js"></script>
+		<script>
+			layui.use(['util', 'layer', 'pearAuth', 'form'], function() {
+
+
+				var util = layui.util;
+
+				var pearAuth = layui.pearAuth;
+				var form = layui.form;
+
+
+			});
+		</script>
+	</body>
+</html>