vue的微信网页授权基于axios，vue-CLI 3.0 web pack 4 vantui sassrem的适配方案。项目地址：vue-微信-auth

参考【vue-微信-登录】，思路有些不同。本文基于进入所有页面前必须授权的操作。

与之前写的授权不同

这一次的逻辑都是在路由器中的每个之前完成的，更加简洁明了。以前是在一个中级页面作者. vue，加上微信授权多次跳转

你可以在这里找到它

微信网页授权前端解决方案，公文

如何使用Natapp(ngrok)进行微信本地开发调试，官方文档

如何配置微信开发测试账号

关于测试帐户和本地开发设置

因为文章太长，记得回来这里【微信测试账号和本地开发调试】

微信网页授权

当它们都设置好后，微信网页开发的第一步，也是最重要的一步，就是对微信网页进行授权

关于授权，首先需要知道的是服务器使用的是微信openid还是微信unionid。两者的区别在于，想要unionid，需要在【微信开放平台】绑定测试账号。测试号的appId和appsecret在微信公众平台的测试号中找到。微信微信官方账号后台-开发者工具-公共平台测试账号-进入

如果不需要unionid，可以省略这个。如果服务器需要unionid，如果未绑定，授权将报告错误。记得问服务器开发者。

探索

首先来看看微信授权的流程图，关于微信网页授权

前端需要做的是

第一步：用户同意授权，获取代码，拼接微信授权地址。redirect_uri是您当前的地址。有些人通过接口获得appid。我会直接写在项目全局变量这里。VUE _ APP _微信_APPID。用户授权成功后，微信会带着代码和状态跳回来。

https://open.weixin.qq.com/connect/oauth2/authorize?Appid=$ {this。appid} redirect _ uri=$ {this。redirect _ uri } response _ type=code scope=$ { this。范围}状态=$ {this。state} #微信_重定向第二步，访问登录界面，将代码发送到服务器。小弟执行一系列操作，交换网页授权access_token的代码，拉取用户信息(范围应该是snsapi_userinfo)，返回登录是否成功，成功后返回用户信息和登录token。

在permission.js中，路由拦截执行这一系列操作，代码注释非常详细

permission.js

从""导入路由器/路由器”从导入存储"。/store '从' @/utils/get-page-title '导入导入getpage title微信验证从./plugins/微信验证'//微信登录插件const QS=require(QS)路由器。在每一个((到，从，下一个)={ const loginStatus=Number(存储。吸气剂。loginStatus)控制台。日志(' loginStatus=' loginStatus ')控制台。日志(' token=' store。吸气剂。token)//页面标题文件。title=getpage title(to。梅塔。title)if(loginStatus===0){//微信未授权登录跳转到授权登录页面const url=window.location.href /解决重复登录全球资源定位器(统一资源定位符)添加重复的密码与状态问题常量解析器=QS。解析(网址。拆分('？)[1])让loginrol if(parseurl。代码解析器。state){ delete parseurl。代码删除parseurl。state loginrol=` $ { URL。拆分('？')[0]}?$ { QS。stringify(ParseURl)} ` } else { loginUrl=URL }//设置微信授权回调地址微信验证。重定向_uri=loginUrl //无论拒绝还是授权都设置成1家店。调度(' user/setLoginStatus '，1) //跳转到微信授权页面window.location.href=微信验证号。authurl } else if(loginStatus===1){//用户已授权，获取代码尝试{ //通过回调链接设置代码状态微信验证。返回微信(to.fullPath) } catch (err) { //失败，设置状态未登录，刷新页面商店。调度(' user/setLoginStatus '，0) location.reload() } //同意授权to.fullPath携带密码参数，拒绝授权没有密码参数常量代码=微信验证号。代码if(代码){ //拿到密码访问服务端的登录接口商店。派单('用户/loginwechdatauth '，代码)。然后(res={ //成功设置已登录状态商店。调度(' user/setLoginStatus '，2) next() }).catch(()={ //失败，设置状态未登录，刷新页面商店。调度(' user/setLoginStatus，0)位置。reload()})} else { store。dispatch(' user/setLoginStatus，0) location.reload() } } else { //已登录直接进入next() }})登录成功后存用户信息，令牌。访问所有的接口的时候都会在页眉携带令牌，如果代币失效了，服务端会返回401,做退出操作，删除登录状态，用户信息，令牌，刷新页面重新进入。

request.js

//登录超时，重新登录if(RES . status===401){ store。派单('用户/FedLogout ').然后(()={ location.reload() }) }用户登录后将代币和用户信息存入仓库中，登录状态设置到甜饼干里，商店用户中主要是进行用户信息存贮获取删除的操作

商店/模块/用户。射流研究…

从" @/API/用户"导入{ loginByCode }，从" @/utils/cache "导入{保存令牌、保存登录状态、保存用户信息、删除令牌、删除用户信息、删除登录状态、加载登录状态、加载令牌、加载用户信息}常量状态={登录状态：加载登录状态()，//登录状态令牌： loadToken()，//令牌用户信息： loadUserInfo() //用户登录信息}常量突变={ SET_USERINFO:(状态，用户信息)={ state。用户信息=用户信息}，SET _ LOGIN _ STATUS:(状态，loginStatus)={状态。loginStatus=loginStatus }，SET_TOKEN:(状态，令牌)={状态。token=token } }常量操作={ //登录相关，通过密码获取代币和用户信息loginwechdatauth({ commit }，code){ const data={ code : code }返回新的承诺((解决，拒绝)={ loginByCode(数据)).然后(res={ //存用户信息，令牌提交(' SET_USERINFO '，savewerinfo(RES . data。用户))提交(“SET_TOKEN”，saveToken(res.data.token))解析(res) }).catch(error={ reject(error) }) }，//设置状态setLoginStatus({ commit }，query){ if(query===0 | | query===1){//上线打开注释，本地调试注释掉，保持信息最新removeToken()removeUserInfo()}//设置不同的登录状态提交(“设置登录状态”，保存登录状态(查询))},//登出fedLogOut() { //删除令牌，用户信息，登陆状态remove token()removeUserInfo()removeLoginStatus()} }导出默认值{ namespaced: true，state，突变，操作}在根目录下。包封/包围（动词包围的简写)开头的三个文件中设置微信应用编号

VUE _ APP _微信_APPID='12345678 '我很难复制代码授权。如果有问题，希望大家给我留言指正，互相学习

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。