详解vue微信网页授权最终解决方案
44 浏览量
2020-10-16
20:14:31
上传
评论 1
收藏 69KB PDF 举报
详解详解vue微信网页授权最终解决方案微信网页授权最终解决方案
主要介绍了 详解vue微信网页授权最终解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一
起跟随小编过来看看吧
vue微信网页授权，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios，开发的微信授权方案。项目地址：vue-
wechat-auth
参考了[vue-wechat-login]，思路有些不同，本文基于进入所有页面都必须先授权的操作。
与之前写的授权不同之处与之前写的授权不同之处
这次的逻辑全部在router的beforeEach进行，相较更加简洁明。之前是在一个中间页author.vue中，加上微信授权要跳转很多
次
在这里你能找到
微信网页授权前端解决方案，官方文档
如何使用Natapp(ngrok)进行微信本地开发调试,官方文档
如何配置微信开发测试账号
关于测试账号和本地开发设置关于测试账号和本地开发设置
由于文章过长这里[微信测试账号和本地开发调试]记得回来哦~
微信网页授权微信网页授权
都设置好了那就开始微信网页开发第一步也是最重要的一步，微信网页授权
关于授权你首先要清楚的是，服务端要用到的是微信openid还是微信unionid，这两者的区别是，如果你要的是unionid,那么你
需要在[微信开放平台]去绑定测试账号。测试号的appId和appsecret在微信公众平台的测试号里找。微信公众号后台->开发者
工具->公众平台测试帐号->进入
如果你不需要unionid，那这个你就可以省略， 如果服务端是需要unionid的那不绑定的话授权会把报错的。记得问一下服务端
开发人员哦。
开发开发
首先我们看下微信授权的流程图，关于微信网页授权
前端需要做的是
第一步：用户同意授权，获取code，拼接微信授权地址，redirect_uri就是你的当前地址，关于appid有些人是通过接口获取
的，我这里就直接写在项目全局变量里了VUE_APP_WECHAT_APPID，用户授权成功后微信会携带code和status跳回来
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${
this.scope}&state=${this.state}#wechat_redirect
第二步，访问登录接口，将code传给服务端，小哥哥进行一系列的操作，通过code换取网页授权access_token，拉取用户信
息(需scope为 snsapi_userinfo)，返回是否登录成功，成功后返回用户信息和登录令牌 token
在permission.js中路由拦截进行这一系列操作，代码注释很详细了
permission.js
import router from './router'
import store from './store'
import getPageTitle from '@/utils/get-page-title'
import wechatAuth from './plugins/wechatAuth' // 微信登录插件
const qs = require('qs')
router.beforeEach((to, from, next) => {
const loginStatus = Number(store.getters.loginStatus)
console.log('loginStatus=' + loginStatus)
console.log('token=' + store.getters.token)
// 页面标题
document.title = getPageTitle(to.meta.title)
if (loginStatus === 0) {
资源评论
