vue微信公众号授权开发流程

vue微信公众号授权开发流程
项目采用的是vue2.0开发的，还未更新到vue3.0.项目描述：只有通过微信授权登录，不需要绑定手机号。
1、注册公众号，这个不多说了
2、配置公众号
在【公众号设置】-【功能设置】-配置JS接口安全域名和网页授权域名；
其中网页授权域名用于授权回调。

3、授权流程
（1）在author页面，先判断是否有token,如果有则直接进入首页（如果接口返回了401，则说明token失效，清除缓存token，跳转到授权页面）。
（2）如果没有token,则需要查看是否有code，如果有code说明已经授权，拿着code当参数，通过后端接口获取token和appid。
（3）如果没有code，首先wx.config 初始化，成功后进入授权，授权成功重新进入本页面则可以获取code，通过后端接口获取token和appid，本地存储后，进入首页。
4、在auth.vue页面中的代码

<script>export default {data(){return {}},created() {// 检测是否登录 是否存在tokenlet token_access = localStorage.getItem('token_access')if(!token_access){this.getTokenByCode();}else{this.$router.push(this.$store.state.toFullPath)}},methods: {getTokenByCode() {let self = this;self.code =  self.getUrlParam('code');if(!self.code){self.$toast.loading('登录中...')self.$mixin.methods.getWxConfig('auth',()=>{self.goAuth()})}else{// 微信登录 通过code获取openId和access_tokenself.goLogin()}},// 登录goLogin(){let self = this;let params = {code: self.code}self.$http.login.wxLogin(params).then(res=>{if(res.code == 200 && res.data){localStorage.setItem('token_access',res.data.token)if(res.data.snsUserInfo){localStorage.setItem('userInfo',JSON.stringify(res.data.snsUserInfo))localStorage.setItem('openId',res.data.snsUserInfo.openid)localStorage.setItem('parentId',res.data.snsUserInfo.parentId)localStorage.setItem('phone',res.data.snsUserInfo.phone)}let beforeLoginUrl = localStorage.getItem('beforeLoginUrl')self.$router.replace(beforeLoginUrl)localStorage.removeItem('beforeLoginUrl')}})},// 授权goAuth() {let appId = localStorage.getItem('appId')if(!appId){return;}let baseurl = this.$store.state.domainName; // 授权回调地址 需要在微信公众平台配置let redirectURL = encodeURI((baseurl + window.location.pathname + window.location.search).split('&code')[0], 'utf-8'); //获取地址let base = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=';let scope = "snsapi_userinfo";window.location.href = base + appId + '&redirect_uri=' + redirectURL + '&response_type=code&scope=' + scope +'&state=STATE' + '#wechat_redirect';},// 获取地址栏 codegetUrlParam(name){var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var rrr = decodeURIComponent(window.location.search);var r = rrr.substr(1).match(reg);if (r != null){return unescape(r[2]);}else{return null;}},}}
</script>

5、公共js写在mixin.js中，代码如下：

import store from '../store/index.js'
import { Toast,Dialog  } from 'vant';
export default {data(){return {}},methods: {// 微信配置getWxConfig(query,callbackFunction){let self = this;let params={},httpUrl;if(query && query.type == 'share'){ // 分享let hashurl = location.href.split("#")[0];params = {url: hashurl,type: 'zsw'}httpUrl = Login.wxhShareConfig(params)}else{ // 支付和授权httpUrl = Login.wxConfig()}httpUrl.then(res=>{if(res.code == 200){wx.config({beta: true, // 必i须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: res.data.appId, // 必填，微信的corpIDtimestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 必填，生成签名的随机串signature: res.data.signature, // 必填，签名jsApiList: ['scanQRCode','checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','updateAppMessageShareData','updateTimelineShareData','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','chooseWXPay','chooseImage','uploadImage','getLocalImgData','downloadImage','closeWindow',]});// alert('wx.config之后appId' + res.data.appId)localStorage.setItem('appId',res.data.appId)          callbackFunction()}})},}
}

5、授权完成后如何跳转到第一次进入的页面？
这需要记录第一次进入的页面地址，在main.js中做记录的。在第四步授权成功后，获取本地存储的页面路由信息，跳转后，删除记录。

//登录页面
router.beforeEach((to, from, next) => {// 判断是否有登录信息，如果没有则进入登录let token =  window.localStorage.getItem('token_access');/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}if(!token){if(to.name === 'Author' ){next();}else{// 记录当前页面地址localStorage.setItem('beforeLoginUrl',to.fullPath)next('/author')return false;}}else{next();}})

这就是最近做的一个完整的授权流程，这是第二次做，流程更加清晰了，相对少踩了一些坑，希望对前端小伙伴有所有帮助。如有问题，欢迎指正。

vue微信公众号授权开发流程相关推荐

前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
springboot+uniapp(vue) 微信公众号h5开发
代码基于jeecgboot 的uniapp项目修改业务类相关代码 //region 授权登录/*** 获取code的地址* @return*/@Overridepublic String getCo ...
vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分 ...
微信公众号授权步骤详细步骤介绍和整合springboot开发（java版）
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 一.微信公众号授权步骤首先到微信公众平台注册账号,可以看到有四种类型(服务号,订阅号,小程 ...
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班从零到壹全栈部落产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
微信登录(微信公众号授权)的开发（详解）
1.UnionId和OpenId 微信登录最重要的两个返回信息,一个是UnionId,一个是OpenId.两者之间有着必然的联系. 首先,先来理一下微信开放平台的架构.开发微信登录,必须有一个开放平台 ...
vue 微信公众号开发
vue 微信公众号开发开题上个月初入职了一家新公司.来了新公司很忙.本来计划是在上个月底写一篇博客的,写一下关于新公司的事情. 几度思考之后还是没写.也许做程序员接手别人的项目,都会说别人的项目多 ...

vue微信公众号授权开发流程

vue微信公众号授权开发流程相关推荐

最新文章

热门文章