1、每次请求时,都会带有token
,Spring Security
会根据token
判断用户信息,进行授权。
2、对于接口权限的控制,我们可以用过使用Spring
的EL
表达式配合@PreAuthorize("hasAnyRole('ADMIN')")
注解来对接口进行权限控制,这段注解表示,只有当前用户的角色为ADMIN
的时候,Spring Security
才会放行。注意:建议使用ROLE_*
的方式存放在数据库中用来规定角色名。
@PreAuthorize("hasAnyRole('ADMIN')")
@RequestMapping(value = "/getRoleList",method = RequestMethod.POST)
public RetResult getRoleList(@RequestBody Map<String,Object> map){
//...
}
Example
使用本系统的系统管理员和测试用户分别使用Postman
测试,这是测试用户访问进行访问时,会抛出AccessDeniedException
权限不足。
使用系统管理员测试结果,可以访问接口获取数据。
前端权限控制
1、由于本系统采用的是动态加载路由,所以如果当前用户的路由列表中没有你所输入访问的会转到404
页面。
2、自定义权限判断方法。配合v-if
指令来进行验证。
创建src\utils\permission.js
import store from '@/store'
export default function hasPermission(value) {
if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles
const permissionList = value
const isPermission = roles.some(role => {
return permissionList.includes(role.rolename)
})
if (!isPermission) {
return false
}
return true
} else {
this.$message({
message: '需要角色权限列表',
type: 'error'
})
return false
}
}
解释一下:就是从Vuex
中拿到角色,然后与页面中定义的权限角色进行判断,如果包含的话就可以访问。
<template slot-scope="scope">
<el-popover
//在这里使用v-if进行判断就行
v-if="hasPermission(['ROLE_ADMIN'])"
:ref="scope.row.id"
placement="top"
width="180">
<p>确定删除本条数据吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" :disabled="scope.row.id === 1" type="danger" size="mini">删除</el-button>
</el-popover>
</template>
...
<script>
import hasPermission from '@/utils/permission'
...
methods: {
hasPermission,
}
这样可以对按钮,或者页面中的一部分页面进行权限控制了~
GitHub分页插件
再说一下Spring Boot
中使用Github
的分页插件
1、首先引入依赖
<!--github分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
2、在application.yml
中配置PageHelper
如下
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql
3、建议封装一个PageUtil
,原因是通常Vue
前端分页需要我们传递当前页:pageNum
,页大小:pageSize
,总数量pageTotal
等参数。
package com.example.security.util;
import com.github.pagehelper.Page;
import lombok.Data;
import java.util.List;
/**
* @Autoor:杨文彬
* @Date:2019/1/21
* @Description:
*/
@Data
public class PageUtil {
private Integer pageCur;
private Integer pageSize;
private Integer rowTotal;
private Integer pageTotal;
private List data;
public PageUtil(Page page,List data) {
this.pageCur = page.getPageNum();
this.pageSize = page.getPageSize();
this.rowTotal = page.getPages();
this.pageTotal = Integer.valueOf((int)page.getTotal());
this.data = data;
}
}
返回数据的格式
然后在前端渲染数据就ok了。目前做了角色管理页面,其中也对角色操作一栏使用hasPermission
进行了权限控制。代码已经同步到Github上了,如果你有任何的建议欢迎联系我~