若依vue集成积木报表,加token校验
若依 集木报表 token 校验
·
一、集成方法
1.参考集木报表官方文档1-7步
ruoyi vue版集成积木报表 · JimuReport 积木报表 · 看云
2.前段,在菜单管理中新建菜单
3. 创建jimu.js api接口
import request from '@/utils/request'
export function indexUrl(query) {
return request({
url: '/report/jimu/index',
method: 'get'
})
}
// 预览
export function view(query) {
return request({
url: '/report/jimu/view',
method: 'get'
})
}
4.创建页面
<template>
<div v-loading="loading" :style="'height:'+ height">
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
</div>
</template>
<script>
import {
getToken
} from '@/utils/auth'
import {
indexUrl
} from '@/api/report/jimu'
export default {
name: "Ureport",
data() {
return {
src: "",
height: document.documentElement.clientHeight - 94.5 + "px;",
loading: true,
};
},
created() {
indexUrl().then(res => {
this.src = res + "?token=Bearer " + getToken();
})
},
mounted: function() {
setTimeout(() => {
this.loading = false;
}, 230);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
}
};
</script>
二、集成token校验
原理:参考官方文档
Token权限控制 · JimuReport 积木报表 · 看云
基本上是:页面链接加上 token
后面从 链接中截出token。自行编写JmReportTokenServiceI 接口,实现
1.yml中配置 报表访问地址
2.在ruoyi -framfork中创建 JimuController ,设置跳转。加入了权限验证。无权限的用户,不能跳转。
@RestController
@RequestMapping("/report/jimu")
public class JimuController {
@Autowired
Environment environment;
@GetMapping("/index")
@PreAuthorize("@ss.hasPermi('report:jimu:index')")
public String index(){
return environment.getProperty("ruoyi.reporturl")+"/jmreport/list";
}
@GetMapping("/view")
@PreAuthorize("@ss.hasPermi('report:jimu:view')")
public String view(){
return environment.getProperty("ruoyi.reporturl")+"/jmreport/view";
}
}
2.实现 JmReportTokenServiceI 。大概可以参考
其中 getUserName,verifyToken
可以用需要根据token获得用户信息,完成校验,因为从链接中获得的token带有前缀,所以需要在tokenServcie中新建一个方法
@Component
public class JimuReportTokenService implements JmReportTokenServiceI {
@Autowired
private TokenService tokenService;
@Autowired
private ISysUserService iSysUserService;
@Override
public String getUsername(String token) {
LoginUser loginUser = tokenService.getLoginUserFromToken(token);
return loginUser.getUsername();
}
// 校验token
@Override
public Boolean verifyToken(String token) {
if(token !=null && token.length()>0){
//这个获得的token 是带前缀的,所以需要新加一个一个方法,处理token,再返回loginUser
LoginUser loginUser = tokenService.getLoginUserFromToken(token);
if (StringUtils.isNotNull(loginUser))
{
return true;
}
}
return false;
}
@Override
public String getToken(HttpServletRequest request) {
String token = request.getParameter("token");
String jmToken = request.getHeader("token");
if (token == null || token.length() == 0) {
token = jmToken;
}
if (token != null && token.length() > 0) {
return token;
}
return "";
}
@Override
public String getToken() {
HttpServletRequest var1 = f.getHttpServletRequest();
return this.getToken(var1);
}
@Override
public Map<String, Object> getUserInfo(String token) {
Map<String, Object> map = new HashMap(5);
LoginUser loginUser = tokenService.getLoginUserFromToken(token);
//设置用户名
map.put(SYS_USER_CODE, loginUser.getUsername());
//设置部门编码
map.put(SYS_ORG_CODE, loginUser.getDeptId());
// 将所有信息存放至map 解析sql/api会根据map的键值解析
return map;
}
@Override
public HttpHeaders customApiHeader() {
HttpHeaders header = new HttpHeaders();
header.add("Authorization", getToken());
header.add("X-Access-Token", getToken());
return header;
}
}
3.tokenservice.java。加一个方法。基本上是抄getLoginUser,前面加上对token的处理。
/**
* 根据 token,获取用户信息
* Bearer + gettoken()
*/
public LoginUser getLoginUserFromToken(String token){
if (StringUtils.isNotEmpty(token))
{
//处理token
if (StringUtils.isNotEmpty(token) && token.startsWith(Constants.TOKEN_PREFIX))
{
token = token.replace(Constants.TOKEN_PREFIX, "");
}
try
{
Claims claims = parseToken(token);
// 解析对应的权限以及用户信息
String uuid = (String) claims.get(Constants.LOGIN_USER_KEY);
String userKey = getTokenKey(uuid);
LoginUser user = redisCache.getCacheObject(userKey);
return user;
}
catch (Exception e)
{
}
}
return null;
}
传入错误token效果
.
报表的查看权限,还没有做到,后续再做。
更多推荐
已为社区贡献1条内容
所有评论(0)