之前自用的项目中使用的是 springsecurity 权限管理框架,没有使用自定义token,因此是默认的 cookie 方式,突然有一天浏览器在跨域的情况下不支持cookie了,虽然可以更改浏览器的安全设置来解决,但这种方法治标不治本,治本还是要使用自定义token方式。
satoken权限控制框架在github上有2.7K的star,算是一个比较不错的框架了,其使用比springsecurity要简单。
一、 maven 依赖
<!-- Sa-Token 权限认证, 在线文档: --> | |
<dependency> | |
<groupId>cn.dev</groupId> | |
<artifactId>sa-token-spring-boot-starter</artifactId> | |
<version>.19.0</version> | |
</dependency> |
二、配置文件
# token名称 (同时也是headers中的名称) | |
spring.sa-token.token-name: satoken | |
# token有效期,单位s 默认天, -1代表永不过期,大概8个多小时必定过期 | |
spring.sa-token.timeout: | |
# token临时有效期 (指定时间内无操作就视为token过期) 单位: 秒 | |
spring.sa-token.activity-timeout: - | |
# 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录) | |
spring.sa-token.allow-concurrent-login: true | |
# 在多人登录同一账号时,是否共用一个token (为true时所有登录共用一个token, 为false时每次登录新建一个token) | |
spring.sa-token.is-share: false | |
# token风格,默认为uuid | |
spring.sa-token.token-style: random- | |
# 是否输出操作日志 | |
spring.sa-token.is-log: false |
三、自定义权限角色查询接口实现
// 保证此类被SpringBoot扫描,完成sa-token的自定义权限验证扩展 | |
public class StpInterfaceImpl implements StpInterface { | |
private UserDao userDao; | |
private RoleMapper roleMapper; | |
private User_RoleMapper user_roleMapper; | |
/** | |
* 返回一个账号所拥有的权限码集合 | |
*/ | |
public List<String> getPermissionList(Object loginId, String loginKey) { | |
// 查出当前用户的权限信息 | |
List<String> list = new ArrayList<String>(); | |
List<Permission> permissions = userDao.findPermissionByUserName(loginId.toString()); | |
permissions. forEach (l -> { | |
list.add(l.getPermTag()); | |
}); | |
return list; | |
} | |
/** | |
* 返回一个账号所拥有的角色标识集合 (权限与角色可分开校验) | |
*/ | |
public List<String> getRoleList(Object loginId, String loginKey) { | |
// 查出当前用户的角色信息 | |
List<String> list = new ArrayList<String>(); | |
int id = userDao.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, loginId.toString())).getId(); | |
List<User_Role> user_roles = user_roleMapper.selectList(Wrappers.<User_Role>lambdaQuery().eq(User_Role::getUid, id)); | |
user_roles.forEach( l -> { | |
int rid = l.getRid(); | |
Role role = roleMapper.selectOne(Wrappers.<Role>lambdaQuery().eq(Role::getId, rid)); | |
list.add(role.getRoleName()); | |
}); | |
return list; | |
} | |
} |
四、java配置文件
关键之处在于排除路径的认证。
由于我这个项目大部分是前后分离的,有一小部分是后端的模板 html 文件请求,因此主要在模板文件请求中如何去传递token。
public class MyConfig implements WebMvcConfigurer { | |
public void addInterceptors(InterceptorRegistry registry) { | |
// 注册路由拦截器,自定义验证规则 | |
registry.addInterceptor(new SaRouteInterceptor((request, response, handler )->{ | |
if (!request.getMethod().equals(HttpMethod.OPTIONS.toString())) { | |
SaRouterUtil.match("/**", () -> StpUtil.checkLogin()); | |
SaRouterUtil.match(Arrays.asList("/user/**","/role/**"), | |
Arrays.asList("/user/selectList", "/user/selectByUserNameAndPassword", "/user/updataPassword"), | |
() -> StpUtil.checkPermission("USERMANAGER")); | |
SaRouterUtil.match("/tax/**",() -> StpUtil.checkPermission("TAXFILES")); | |
SaRouterUtil.match("/customer/**",() -> StpUtil.checkPermission("COMPANYFILES")); | |
SaRouterUtil.match("/product/**",() -> StpUtil.checkPermission("PRODUCTFILES")); | |
SaRouterUtil.match("/designNotice/**",() -> StpUtil.checkPermission("NOTICEDESIGN")); | |
SaRouterUtil.match("/price/**",() -> StpUtil.checkPermission("PRICEDESIGN")); | |
SaRouterUtil.match(Arrays.asList("/contract/**","/picture/**"),() -> StpUtil.checkPermission("CONTRACTMANAGER")); | |
} | |
})).addPathPatterns("/**").excludePathPatterns("/login","/static/**","/showNotice", | |
"/noticepicture/show","/noticepicture/down", | |
"/images/**", | |
"/price/download","/user/backup", | |
"/picture/show","/picture/downjpg"); | |
//此上为排除的路径,需要自定义其验证,包括login请求 | |
} | |
} |
五、后端模板文件的自定义token请求
模板文件的请求是通过url路径来请求的,且前后端分离情况下的token不能传递到模板文件的请求体headers中,因此我想了个办法,使用url传递token,然后在后端进行验证token的合法性。
- 前端代码中js逻辑,添加一个satoken参数
showNotice (index, id) { | |
window.open(global.BASE_URL + 'showNotice?id=' + id + '&satoken=' + this.$store.state.satoken) | |
}, |
- 后端代码
"跳转设计制作通知单——return:showNotice.html") | (value=|
"/showNotice") | (|
public String toshowNotice(int id,String satoken){ | |
Object loginId = StpUtil.getLoginIdByToken(satoken); | |
if (loginId != null){ | |
//getLoginIdByToken方法,获取指定token对应的登录id,如果未登录,则返回 null | |
return "showNotice"; | |
} else { | |
// token验证不通过跳转到.html显示无权限页面 | |
return ""; | |
} | |
} |
六、登录、登出请求
"/login") | (|
public Result<User> doLogin(User user) { | |
// 从数据库中查询数据进行比对 | |
String username = user.getUsername(); | |
String password = user.getPassword(); | |
Result<Boolean> result = userService.selectByUserNameAndPassword(username, password); | |
if (result.getData()) { | |
//当前用户登录 | |
StpUtil.setLoginId(username); | |
Result<User> result = userService.selectByUserName(username); | |
List<Permission> permission = userDao.findPermissionByUserName(username); | |
User user = result1.getData(); | |
//设置权限 | |
user.setAuthorities(permission); | |
//设置token值 | |
user.setSatoken(StpUtil.getTokenValue()); | |
result.setData(user1); | |
return result; | |
}else { | |
return Result.failure(,"登录失败"); | |
} | |
} | |
"/logout") | (|
public Result<String> logout() { | |
StpUtil.logout(); | |
eturn Result.defaultSuccess("登出成功"); | |
} |
七、密码的加密处理
之前在sprintsecurity中使用的是BCrypt加密,去除依赖后需要修改,引入hutool依赖包。
//将明文密码进行加密 | |
String BCrypt.hashpw(password) | |
//将明文密码与加密后的密码进行比较 | |
Boolean BCrypt.checkpw(password,hashpw) |
八、前端中对于satoken的处理
在前端中使用的是vue+element+axios+vuex。
在登录的时候将satoken的值存储到vuex中,在登出或者响应token错误代码的时候清除vuex中的satoken值。
然后在axios请求的配置中加上headers。
axios.interceptors.response.use((response) => { | |
if (response.data === null) { | |
window .location = '/login' | |
} else { | |
return response | |
} | |
}, function (error) { | |
if (error.response.status ===) { | |
window.location = '/login' | |
} else if (error.response.status ===) { | |
// 服务器返回代码时未登录清除缓存并跳转至登录页面 | |
store.commit('del_token') | |
window.location = '/login' | |
} else { | |
return Promise.reject(error) | |
} | |
}) | |
// 在每次请求中携带satoken的headers | |
axios.interceptors.request.use((config) => { | |
let satoken = store.state.satoken | |
if (satoken) { | |
config.headers['satoken'] = satoken | |
} | |
return config | |
}, err => { | |
return Promise.reject(err) | |
}) |
九、关于element的upload组件中如何携带token
需要一个computed属性
computed: { | |
headers () { | |
return { | |
'satoken': this.$store.state.satoken // 直接从本地获取token就行 | |
} | |
} | |
}, |
在组件属性中增加一个 :headers=”headers”
<el-upload | |
class="upload-demo" | |
ref="upload" | |
:action="action()" | |
accept=".jpg,.png" | |
:before-upload="beforeAvatarUpload" | |
:on-success="onSuccess" | |
:on-preview="handlePreview" | |
:before-remove="beforeRemove" | |
:on-remove="handleRemove" | |
:file-list="orderfileList" | |
:multiple="false" | |
:headers="headers" | |
:auto-upload="true"> | |
<el-button slot="trigger" size="small" type="primary">选择</el-button> | |
<span slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过MB</span> | |
</el-upload> |
此处有一个重要问题,这个问题坑了我半天时间,使用token时不需要使用cookie了,因此之前使用springsecurity的时候使用的一个属性 :with-credentials = “true” 需要去掉,因为它还会检测cookie,导致上传验证不通过,此值默认为false,因此去掉即可。