若依vue集成积木报表，加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 。大概可以参考

jeecg-boot/jeecg-boot-module-system/src/main/java/org/jeecg/config/jimureport/JimuReportTokenService.java · JEECG官方/jeecg-boot - Gitee.com

其中 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效果

.

报表的查看权限，还没有做到，后续再做。