若依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效果

 

.

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