# pshiro

**Repository Path**: springff/pshiro

## Basic Information

- **Project Name**: pshiro
- **Description**: ssm 框架下使用 shiro 实现登录验证，动态 URL 权限配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-01
- **Last Updated**: 2021-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# shiro 入门 --- pshiro

**参考：**

- [Exrick/xmall 项目](https://github.com/Exrick/xmall)
- [Shiro 动态 URL_w3cschool](https://www.w3cschool.cn/shiro/xk9m1ifi.html)

ssm 框架下使用 shiro 实现登录验证，动态 URL 权限配置

**功能：**

- 前后端分离，ajax 前后端通信，jsp页面直接转发 controller 层转发
- 后台管理页面需要登录访问；普通用户只拥有部分功能权限，例如只有商品权限，操作其他模块时提示没有权限
- 超级管理员可以 crud 权限，角色，用户，商品

**界面：**

- 登录 ， 顶部菜单栏 用户名 + 登出   
- 左侧菜单：商品列表 ，权限列表，角色列表，用户列表，并且能够crud
- 右侧 iframe 展示内容；点击左侧菜单，内容页刷新数据；

<img src="assets/readme/image-20210903164232289.png" alt="image-20210903164232289" style="zoom: 50%;" />

<img src="assets/readme/image-20210903164311638.png" alt="image-20210903164311638" style="zoom: 67%;" />

![image-20210903171242536](assets/readme/image-20210903171242536.png)

**数据表：** tb_permission, tb_role，tb_role_perm, tb_user，tb_shiro_filter, tb_product

**后端开发：**

 ssm初始化 --> UserController --> shiro配置 --> ItemController

spring + spring mvc + mybatis + mybatis-generator + jackson + shiro

shiro 配置流程：pom.xml --> web.xml fileter --> spring-mvc.xml --> ShiroFactoryBean --> Realm --> PermissionFilter --> UserController login logout

代码流程：

- controller --> servcie --> serviceImpl --> (pojo, mapper) ------> 简单 login.jsp 页面登录验证，其他接口请求返回json数据

- shiro 接入登录测试 --> shiro 普通用户访问权限测试：ItemController.method (能访问), UserController.method（提示没有权限）（模拟ajax请求）--> 超级用户访问权限测试

**前端开发：**

感受 shiro 核心功能-->登录 + 鉴权，直接发送 get 请求就行，前端框架只是展示的更具体；页面开发基本上是复制 bootstrap 上的案例，先完成大致 html 页面然后拷贝到 jsp中调整。

前端框架：bootstrap，iframe 内容页，ajax 请求

- login.jsp 
- index.jsp bootstrap 后台管理案例基础 ----> `$('#myiframe').attr('src',href);`，iframe 高度需要手动计算
-  item-list.jsp 包含了crud操作，其他页面类似；新增、更新操作使用 **模态框** 弹出新的 layer 实现（方便拿到主键id）

**权限验证流程：**

filterChain（判断请求是否需要权限认证） --> AuthricationFilter.isAccessAllowed （判断用户是否登录）--> Realm.getAuthrizationInfo （获取登录用户的权限） --> AuthricationFilter.isAccessAllowed （判断用户是否有权限访问）--> 跳转目标页面或权限缺失提醒页面



**代码：**  https://gitee.com/springff/pshiro



**过程记录：**

超级管理员在为角色授权之后，对应角色需要重新登录才能够生效，还是实时生效

统计所有请求的url，工程量比较大，还容易出错

example 在联表查询的时候就没有那么方便

权限是有相互关联的：用户权限就依赖着角色权限，需要为用户设置角色；

登录的过期时间怎样设置，登录过期在哪里进行的判断

jquery 动态为 table 添加数据 -- `$().append('<tr><td></td></tr>')`

用户角色应该是多选，用户表与角色表示多对多关系，目前简化为一对一关系，多对多关系需要



[js控制iframe高度自动撑开_bo o ya ka的博客-CSDN博客](https://blog.csdn.net/weixin_30535843/article/details/96695094)

`<a>`标签的跳转绑定 data 属性

[JQuery选择器通过click事件获取当前点击对象的id,name,value属性_不二的博客-CSDN博客_jquery获取点击的对象](https://blog.csdn.net/rocling/article/details/81990372)

```js
$(".test").click(function () {
    var val=$(this).attr("id");
    alert(val);
})
```

[【iframe】iframe修改src的值实现整个页面刷新。_Abubu123的博客-CSDN博客](https://blog.csdn.net/Abubu123/article/details/67638307)



商品编辑页面的商品id是通过，parent 获取到的，编辑页面是弹出的 layer，就像对话框一样 ---模态框

ajax 请求模板

ajax 提交 form 表单，不是单独提出 input 的元素， formData

[JQuery中使用FormData异步提交数据和提交文件](https://blog.csdn.net/qq_34720759/article/details/78885657)

动态生成的元素，无法注册点击事件

新增取值，赋值，修改取值



怎样将模态层写到新的页面，并且和父级页面联系起来，

修改密码重编辑用户信息页面独立出去

[jquery操作select(取值，设置选中） - 海乐学习 - 博客园 (cnblogs.com)](https://www.cnblogs.com/hailexuexi/p/6708110.html)

[HTML radio 单选框 - 码农教程 (manongjc.com)](http://www.manongjc.com/html/html_radio.html)	

[HTML 单选按钮根据值设置选中和获取值_每天进步一点点儿-CSDN博客_html单选框获取值](https://blog.csdn.net/yan88888888888888888/article/details/84589466)

[如何在浏览器里调试iframe里面的代码（f12）_hunt_er的博客-CSDN博客_iframe 控制台](https://blog.csdn.net/hunt_er/article/details/107469397)

f12 --> 网络 --> ctrl + 点击 --> 跳转源代码

[(1条消息) mybatis一起插入多条数据_dayulxl的博客-CSDN博客](https://blog.csdn.net/dayulxl/article/details/85325344)

```xml
<insert id="insertMulti" parameterType="java.util.ArrayList">
    insert into tb_role_perm (id, role_id, permission_id) values
    <foreach collection="list" item="rolePerm" index="i" separator=",">
        (#{rolePerm.id,jdbcType=INTEGER}, #{rolePerm.roleId,jdbcType=INTEGER}, #{rolePerm.permissionId,jdbcType=INTEGER})
    </foreach>
</insert>
```

`collection="list"` collection 的值只能是 collection/list

[jquery实现全选、反选、获得所有选中的checkbox_jquery_脚本之家 (jb51.net)](https://www.jb51.net/article/75717.htm)

```js
// 实现全选
$("#btn5").click(function(){ 
    var aa=""; 
    $("input[name='checkbox']:checkbox:checked").each(function(){ 
    	aa+=$(this).val() 
    });
    document.write(aa); 
})
```

[Jquery属性选择器（同时匹配多个条件,与或非）（附样例） - unionline - 博客园 (cnblogs.com)](https://www.cnblogs.com/fanbi/p/7705235.html)



ajax 传递数组到 ssm，需要将数据拼接成 `'1,2,3,4,5'` 逗号分隔的字符串，直接传递数组对象会报参数解析错误

```js
$('#editRoleForm input[name="permIds"]:checked').each(function (index){
    permIds[index] = $(this).val();
});
permIds = permIds.join(',');
$.ajax({
    url: 'user/updateRole',
    type: 'post',
    data: {id, name, permIds},
    success: function (response) {},
    error: function (error) {}
});
```



jquery 常用方法

```js
// 添加类
addClass();
// 删除指定类
removeClass('blue');
// 删除所有类
removeClass();
// 父元素
parent();
// 清空子元素
empty();
// select 获取选中的值
$('#select').on('change', funcation(){
                let selOptionValue = $(this).find('option:seleted').val();
                });
// 根据属性进行选择
let password = $('input[name="password"]').val();
// 根据属性进行选择 -- and
$('#editRoleModal input[name="permIds"][value="'+id+'"]').attr('checked', true);
// 遍历选择器过滤的元素
$(selector).each(function(index,element));
```

js 常用方法

```js
// 数组转字符串
var str = arr.join(',');
// 字符创拆分为数组
var arr = '1,2,3,4'.split(','); // [1,2,3,4]
```