SpringBoot后台 微信Uniapp,vue实现前端微信的网页授权以及跳转

折腾了2 3天发现，微信网页授权必须要在前端通过JS完成

第一步 首先在路由文件中设置路由守卫

在路由文件中需要验证的页面中设置meta一个auth属性为true

{
	    path: '/pages/tabbar/my/my',
	    name: 'my',
	    meta: {
	        title: '我的',
			auth:true
	    },
	},

// router/index.js

import modules from './modules'
import Vue from 'vue'
//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'
import {request} from "../common/utils/js/request.js"
Vue.use(Router)
//初始化
const router = new Router({
	routes: [...modules] //路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
//在路由跳转时首先进行验证，如果auth为true，那么就判断是否已经登录，已经登录就继续下一步。如果没有就前往验证页面
	if (to.meta.auth) {
		
		if (Boolean(localStorage['isLogin'])) { //如果已经登录 就继续下一步
			next();
		} else {
			//console.log(to.path)
			**//这里跳转的时候携带上要跳转的url，在验证后直接跳转**
			next({path:"/pages/auth/auth",query:{url:to.path}
			}); //否则跳转到登录页面
		}
	} else {
		next();
	}
})
// 全局路由后置守卫
router.afterEach((to, from) => {})
export default router;

新建一个auth验证页面

这是一个空白页面，进行验证跳转的

<template>
	<view>
		授权
	</view>
</template>

<script>
	import {request} from "../../common/utils/js/request.js"
	import Router from '@/router'
	export default {
		
		data() {
			return {
				code:"",
				state:""
				
			};
		},
		created() {
			  this.getCode()
			
		},
		methods:{
			// 获取url中的code
			getCode(){
				this.code=''
				var local=window.location.href
				var appid='xxxxxxxxxxxx'
				this.code=this.getUrlCode().code
				this.state=local.split("#")[1]
				//如果没有code值就进行微信验证获取code，这里很坑爹，一直想用后台直接验证再跳转是不行的。而且这个redirect_uri的域名必须是在微信后台验证了的域名。验证后跳转到原来的页面，这样就携带上了code参数。再通过截取获得
				if(this.code==null||this.code===''){
					window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect`
				}else{
					//如果有code通过ajax请求后端获取个人数据
					var data={code:this.code}
					//这是后端的springboot接口地址
					request("http://xxxxxxx.com/sell/wechat/userInfo","post",data).then(res=>{
						var query=this.$route.query.query
						var url=JSON.parse(query).url
						console.log(query)
						if(res.code===0){
							localStorage['isLogin']=true
							localStorage['nickname']=res.data.nickname
							localStorage['headImgUrl']=res.data.headImgUrl
							Router.push(url)
						}
					})
				}
				
			},
			// 通过截取url获取url中的参数对象
			getUrlCode(){
				var url=location.search
				this.winurl=url
				var theRequest=new Object()
				if(url.indexOf("?")!=-1){
					var str=url.substr(1)
					var strs=str.split("&")
					console.log("strs",strs)
					for(var i=0;i<strs.length;i++){
						theRequest[strs[i].split("=")[0]]=strs[i].split("=")[1]
					}
				}
				return theRequest
			}
		}
	}
</script>

<style lang="scss">

</style>

后端接口

通过weixin-java-tools工具包 获取用户信息并且返回给前端

@PostMapping("/userInfo")
    @ResponseBody
    public ResultVO userInfo(@RequestParam("code") String code)  {
        WxMpOAuth2AccessToken wxMpOAuth2AccessToken=new WxMpOAuth2AccessToken();
        WxMpUser wxMpUser=new WxMpUser();
        try{
            wxMpOAuth2AccessToken=wxMpService.getOAuth2Service().getAccessToken(code);
            wxMpUser = wxMpService.getOAuth2Service().getUserInfo(wxMpOAuth2AccessToken, null);
        }catch (WxErrorException e){
            log.error("【微信授权获取用户信息】获取信息错误，{}",e);
            throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(),e.getError().getErrorMsg());
        }
        String openId=wxMpOAuth2AccessToken.getOpenId();
        String accesstoken=wxMpOAuth2AccessToken.getAccessToken();

        //在这里可以根据acctoken和openid获取 用户信息
        log.info(wxMpUser.toString());
        return ResultVOUtil.success(wxMpUser);
    }