权限认证模块

develop
Jmysy 2020-06-11 06:29:16 +08:00
parent bcf48af57b
commit 518075ef5f
7 changed files with 159 additions and 36 deletions

View File

@ -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",

View File

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

View File

@ -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;
@ -26,9 +27,18 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
this.themeRender(option);
this.noticeRender(option);
this.permissionRender(option);
}
this.permissionRender = function(option){
if(option.auth!=false){
pearAuth.loadPermission(option.auth);
}
}
this.menuRender = function(option) {
/** 侧 边 菜 单 组 件 初 始 化 */

View File

@ -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) {
}
/**
* 清楚权限
* */
pearFrame.prototype.clearPermission = function (opt) {
pearAuth.prototype.clearPermission = function () {
localStorage.removeItem('auth_cache')
}
/** 同 步 请 求 获 取 数 据 */
function getData(url) {
$.ajaxSettings.async = false;
var data = null;
$.get(url, function(result) {
data = result;
});
/**
* 删除权限
* */
pearFrame.prototype.removePermission = function (opt) {
}
/**
* 权限验证
* */
$.ajaxSettings.async = true;
return data;
}
var doms = $("*[pear-has-permission]");
$.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());
})

View File

@ -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",

View File

@ -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 = {

View File

@ -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>