微信登录功能，web前端开发学习总结

#5、微信二维码显示

#设置路由id

spring.cloud.gateway.routes[4].id=service-user

#设置路由的uri

spring.cloud.gateway.routes[4].uri=lb://service-user

#设置路由断言,代理servicerId为auth-service的/auth/路径

spring.cloud.gateway.routes[4].predicates= Path=/*/ucenter/**

2.2、前端显示登录二维码

---

2.2.1、封装api请求

创建/api/user/wexin.js文件

import request from ‘@/utils/request’

const api_name = /api/ucenter/wx

export default {

getLoginParam() {

return request({

url: ${api_name}/getLoginParam,

method: get

})

}

}

2.2.2、修改组件

修改layouts/myheader.vue文件，添加微信二维码登录逻辑

1、引入api

import weixinApi from ‘@/api/weixin’

2、引入微信js

mounted() {

// 注册全局登录事件对象

window.loginEvent = new Vue();

// 监听登录事件

loginEvent.$on(‘loginDialogEvent’, function () {

document.getElementById(“loginDialog”).click();

})

// 触发事件，显示登录层：loginEvent.$emit(‘loginDialogEvent’)

//初始化微信js

const script = document.createElement(‘script’)

script.type = ‘text/javascript’

script.src = ‘https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js’

document.body.appendChild(script)

// 微信登录回调处理

let self = this;

window[“loginCallback”] = (name,token, openid) => {

self.loginCallback(name, token, openid);

}

},

3、实例化微信JS对象

添加微信登录方法

//微信二维码显示

weixinLogin() {

this.dialogAtrr.showLoginType = ‘weixin’

weixinApi.getLoginParam().then(response => {

var obj = new WxLogin({

self_redirect:true,

id: ‘weixinLogin’, // 需要显示的容器id

appid: response.data.appid, // 公众号appid wx*******

scope: response.data.scope, // 网页默认即可

redirect_uri: response.data.redirect_uri, // 授权成功后回调的url

state: response.data.state, // 可设置为简单的随机数加session用来校验

style: ‘black’, // 提供"black"、"white"可选。二维码的样式

href: ‘’ // 外部css文件url，需要https

})

})

},

说明：微信登录方法已绑定weixinLogin()，查看页面

4、测试

刷新页面，查看效果

2.3、处理微信回调

---

2.3.1、引入依赖