企业微信接入芋道SpringBoot项目

背景:使用芋道框架编写了一个数据看板功能需要嵌入到企业微信中,方便各级人员实时观看

接入企业微信的话肯定不能像平常pc端一样先登录再根据权限看页面,不然的话不如直接手机浏览器打开登录账号来得更为方便,所以迎面而来面临两个问题

1. 绕过原本遇到框架登录,企业微信点击后可以直接进入要看的数据看板功能

2. 通过企业微信返还给我们的code拿去我们对应的人员信息等数据

解决问题

1. 绕过原本遇到框架登录,企业微信点击后可以直接进入要看的数据看板功能

后端:

在芋道框架中进入以上页面之后可以发现芋道后端接口的跳过权限校验的方法,也就是在配置文件中将接口路径写入进去即可,如下所示将对应接口路径写在该位置即可

也可以使用注解@PermitAll:不管登入,不登入都能访问该方法 

注:如果一个页面有多个接口那么所有接口均需要写上此注解,否则会提示登录状态过期 

前端:

src/router/indes.js页面中编写企业微信点击跳转后的路由

src/permission.js页面中在whiteList将path路径名称加入,此时该页面不会检测是否存在token

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getAccessToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'NProgress.configure({ showSpinner: false })// 增加三方登陆 update by 芋艿
const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee', '/loaginLevel', '/level']
router.beforeEach((to, from, next) => {NProgress.start()if (getAccessToken()) {to.meta.title && store.dispatch('settings/setTitle', to.meta.title)/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done()} else {if (store.getters.roles.length === 0) {isRelogin.show = true// 获取字典数据 add by 芋艿store.dispatch('dict/loadDictDatas')// 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(() => {isRelogin.show = falsestore.dispatch('GenerateRoutes').then(accessRoutes => {// 根据roles权限生成可访问的路由表router.addRoutes(accessRoutes) // 动态添加可访问路由表next({ ...to, replace: true }) // hack方法 确保addRoutes已完成})}).catch(err => {store.dispatch('LogOut').then(() => {Message.error(err)next({ path: '/' })})})} else {next()}}} else {// 没有tokenif (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单,直接进入next()} else {next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页NProgress.done()}}
})router.afterEach(() => {NProgress.done()
})

至此企业微信点击跳转已绕过登录页面,且不会检测token

2. 通过企业微信返还给我们的code拿去我们对应的人员信息等数据

引入依赖

        <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-cp</artifactId><version>4.4.0</version><scope>compile</scope></dependency>

调用企业微信将code返还给企业微信换回用户信息,再根据用户信息拿到完整的用户信息,并生成token反馈给前端

    WxCpLettuceRedisConfigImpl config = new WxCpLettuceRedisConfigImpl(redisTemplate);// 注册的企业信息config.setCorpId(你的corpId);config.setCorpSecret(你的corpSecret);config.setAgentId(企业微信自研应用ID);WxCpService service = new WxCpServiceImpl();service.setWxCpConfigStorage(config);WxCpOauth2UserInfo userInfo = service.getOauth2Service().getUserInfo(code);String userId = userInfo.getUserId();// 使用账号密码,进行登录AdminUserDO user = userMapper.getUserInfoByUserId(userId);return createTokenAfterLoginUser(user.getId(), user.getUsername(), LoginLogTypeEnum.LOGIN_USERNAME, user.getMobile());

如需要WxCpLettuceRedisConfigImpl工具类可私信我获取

调用原始方法生成token返回给前端,前端设置即可,至此接入企业微信完成(当然还需要有权限的人员给分配路跳转由,无需担心内网服务外部无法访问,企业微信对此有自己的特殊方式解决)

接入后其他问题

刷新页面code失效 无法获得数据

企业微信提供的code是有时效的并且只可以消费一次,当我们刷新页面时code不会变,但是code已经消费过了去请求接口时会报错code异常,对于页面来说当然不算是报错还应该可以继续拿到信息,所以在前端直接把数据存到localStorage我们每次去localStorage拿取即可

loginbycode() {let query = {code: this.getQueryVariable('code'),status: this.getQueryVariable('status')}loginbycode(query).then(response => {// 刷新页面时会再次请求此方法,此方法第二次请求返回的值都为null,我们仅需要保存第一次或者有值的即可    if (response.data.userMobile != null){localStorage.setItem('userMobile', response.data.userMobile)}if (response.data.accessToken != null){localStorage.setItem('AccessTokenKey', response.data.accessToken)}if (response.data.refreshToken != null){localStorage.setItem('RefreshTokenKey', response.data.refreshToken)}this.params.mobile = localStorage.getItem('userMobile')getUserNumByUserRole(this.params).then(res => {this.userIn = resthis.getListMsgByUserRole()this.getListMsg()});});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在CentOS上用yum方式安装MySQL8过程记录

此文参考官方文档一步一步记录安装到正常运行全过程 安装环境&#xff1a;centos7 mysql版本&#xff1a;8.0.35 安装过程主要参考下面两边文章&#xff1a; 1.官方文档 https://dev.mysql.com/doc/refman/8.0/en/linux-installation-yum-repo.html 2.linux yum安装mysql8 安…

css写个三角形

点击三角形&#xff0c;展开或者收起内容 <template><div><div class"zhankai" click"btn()">展开 <span :class"{sanjiao:true,rotate:flag}"></span></div><!-- 展示或者收起 --><el-collapse-…

Go 开发IDE全览:GoLand VS VSCode全面解析

一、引言 在软件开发的世界里&#xff0c;开发环境的选择与配置是成功项目的基础之一。特别是在Go&#xff08;又名Golang&#xff09;这样一个逐渐获得主流认同、在微服务和云计算领域有着广泛应用的编程语言中&#xff0c;选择合适的开发工具就显得尤为重要。虽然Go语言自身…

博通BCM575系列 RDMA 网卡驱动 bnxt_re 分析(一)

简介 整个BCM系列驱动分成以太网部分(bnxt_en.ko)和RDMA部分(bnxt_re.ko), 两个模块之间通过内核的auxiliary_bus进行管理.我们主要分析下bnxt_re驱动. 代码结构 这个驱动的核心是 qplib_fp.c, 这个文件主要包含了驱动的数据路径, 包括Post Send, Post Recv, Poll CQ流程的实…

Android NDK开发详解之Application.mk探秘

Android NDK开发详解之Application.mk探秘 概览变量APP_ASFLAGSAPP_ASMFLAGSAPP_BUILD_SCRIPTAPP_CFLAGSAPP_CLANG_TIDYAPP_CLANG_TIDY_FLAGSAPP_CONLYFLAGSAPP_CPPFLAGSAPP_CXXFLAGSAPP_DEBUGAPP_LDFLAGSAPP_MANIFESTAPP_MODULESAPP_OPTIMAPP_PLATFORMAPP_PROJECT_PATHAPP_STL…

Amaon CloudFront助力出海业务访问优化

企业的展示网站需要面向多个国家的客户时&#xff0c;由于地理位置的原因。往往会出现一个痛点&#xff0c;网络延迟太高&#xff0c;以至于图片、视频播放时会非常卡顿。客户的访问体验非常差&#xff0c;直接影响到企业收益。此篇文章九河云综合分析Amaon CloudFront&#xf…

matplotlib论文图片配色

还在为配图的颜色而烦恼嘛&#xff0c;还在为matplotlib的经典颜色而困惑嘛&#xff0c;看完下面的文章&#xff0c;教你如何选择图片颜色 上图左边是matplotlib默认的颜色系统&#xff0c;而右边就是使用matplotlib自带的颜色系统实现的。如何实现&#xff0c;请继续往下浏览 …

当面试问你接口测试时,不要再说不会了

很多人会谈论接口测试。到底什么是接口测试&#xff1f;如何进行接口测试&#xff1f;这篇文章会帮到你。 前端和后端 在谈论接口测试之前&#xff0c;让我们先明确前端和后端这两个概念。 前端是我们在网页或移动应用程序中看到的页面&#xff0c;它由 HTML 和 CSS 编写而成…

五分钟理解Java跨平台原理(适合小白)

JVM通俗的理解 Java语言的一个非常重要的特点就是与平台的无关性。而使用Java虚拟机&#xff0c;即JVM&#xff08;Java Virtual Machine&#xff09;是实现这一特点的关键。JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机…

大厂面试题-什么是JVM

JVM全称是Java虚拟机&#xff0c;在聊什么是JVM之前&#xff0c;我们不妨看⼀下这张图。 从这张图中可以看出JVM所处的位置&#xff0c;同时也能看出它两个作用&#xff1a; 1、运⾏并管理Java源码⽂件所⽣成的Class⽂件&#xff0c; 2、在不同的操作系统上安装不同的JVM&#…

瑞萨RH850-P1X ECM和英飞凌TC3xx SMU对比

1.1 基本结构 P1X ECM(Error Control Module)收集从不同的错误源和监控电路发来的错误信号&#xff0c;并通过error pin(ERROROUTZ)对外输出、产生中断并发出ECM reset信号。 P1x-C系列根据产品型号不同&#xff0c;ECM个数也不相同&#xff0c;如下&#xff1a; 对应寄存器基地…

Typora 最新激活方法

Markdown是一种可以使用普通文本编辑器编写的标记语言&#xff0c;通过简单的标记语法&#xff0c;它可以使普通文本内容具有一定的格式&#xff0c;其目标是实现易读易写。而Typora则是一个非常不错的Markdown编辑器&#xff0c;它的界面非常的简洁直观&#xff0c;并且功能各…

css画一条虚线,用到background-image:linear-gradient线性渐变的属性

CSS实现虚线的方法_css 虚线_saltlike的博客-CSDN博客 渐变属性(background-image)全解析_background-image linear_大聪明码农徐的博客-CSDN博客 Background:linear-gradient()详解_background: linear-gradient_小白白中之白的博客-CSDN博客 注意&#xff1a; 必须要写高…

Gateway服务网关

本篇资料&#xff1a;https://gitee.com/Allengan/cloud-demo.githttps://gitee.com/Allengan/cloud-demo.git 目录 1.为什么需要网关 2.gateway快速入门 1&#xff09;创建gateway服务&#xff0c;引入依赖 2&#xff09;编写启动类 3&#xff09;编写基础配置和路由规则…

Spring更加简单的读取和存储对象

前言&#xff1a;在上篇文章中&#xff0c;小编写了一个Spring的创建和使用的相关博客&#xff1a;Spring的创建和使用-CSDN博客&#xff0c;但是&#xff0c;操作/思路比较麻烦&#xff0c;那么本文主要带领大家走进&#xff1a;Spring更加简单的读取和存储对象&#xff01; 本…

1300*C. Social Distance(贪心构造)

Problem - 1367C - Codeforces 解析&#xff1a; 统计出所有连续0序列&#xff0c;并且记录其左右两侧有没有1&#xff0c;然后对于四种情况分别判断即可。 #include<bits/stdc.h> using namespace std; int t,n,k; signed main(){scanf("%d",&t);while(…

笔记软件Notability mac中文版软件功能

Notability mac是一款帮助用户备注文件的得力工具&#xff0c;Notability Mac版可用于注释文稿、草拟想法、录制演讲、记录备注等。它将键入、手写、录音和照片结合在一起&#xff0c;便于您根据需要创建相应的备注。 Mac Notability mac中文版软件功能 将手写&#xff0c;照片…

优先队列PriorityQueue

前言 PriorityQueue这个队列不知道大家使用过吗&#xff0c;反正我用的很少&#xff0c;主要对它不是很了解&#xff0c;今天我带领大家剖析下PriorityQueue这个优先级队列。 PriorityQueue介绍 顾名思义&#xff0c;PriorityQueue是优先队列的意思。优先队列的作用是能保证每…

基于UDP/TCP的网络通信编程实现

小王学习录 今日鸡汤Socket套接字基于UDP来实现一个网络通信程序DatagramSocket类DatagramPacket类基于UDP的服务器端代码基于UDP的客户端代码基于TCP来实现一个网络通信程序ServerSocket类Socket类基于TCP的服务器端代码基于TCP的客户端代码优化之后的服务器端代码补充TCP长短…

钡铼技术 工控机中的X86和ARM处理器:哪个更具可扩展性?

X86和ARM是两种不同的处理器架构&#xff0c;它们在工控机中的应用也有所不同。 X86架构的处理器是英特尔公司和AMD公司生产的&#xff0c;它们主要应用于个人电脑和服务器等领域。X86架构的处理器具有良好的通用性和兼容性&#xff0c;可以运行各种操作系统和应用软件。X86架…