详解vue微信网页授权最终解决方案


Posted in Javascript onJune 16, 2019

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在微信公众平台的测试号里找。微信公众号后台->开发者工具->公众平台测试帐号->进入

详解vue微信网页授权最终解决方案

如果你不需要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

详解vue微信网页授权最终解决方案

在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) {
 // 微信未授权登录跳转到授权登录页面
 const url = window.location.href
 // 解决重复登录url添加重复的code与state问题
 const parseUrl = qs.parse(url.split('?')[1])
 let loginUrl
 if (parseUrl.code && parseUrl.state) {
 delete parseUrl.code
 delete parseUrl.state
 loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`
 } else {
 loginUrl = url
 }
 // 设置微信授权回调地址
 wechatAuth.redirect_uri = loginUrl
 // 无论拒绝还是授权都设置成1
 store.dispatch('user/setLoginStatus', 1)
 // 跳转到微信授权页面
 window.location.href = wechatAuth.authUrl
 } else if (loginStatus === 1) {
 // 用户已授权,获取code
 try {
 // 通过回调链接设置code status
 wechatAuth.returnFromWechat(to.fullPath)
 } catch (err) {
 // 失败,设置状态未登录,刷新页面
 store.dispatch('user/setLoginStatus', 0)
 location.reload()
 }
 // 同意授权 to.fullPath 携带code参数,拒绝授权没有code参数
 const code = wechatAuth.code
 if (code) {
 // 拿到code 访问服务端的登录接口
 store
 .dispatch('user/loginWechatAuth', code)
 .then(res => {
  // 成功设置已登录状态
  store.dispatch('user/setLoginStatus', 2)
  next()
 })
 .catch(() => {
  // 失败,设置状态未登录,刷新页面
  store.dispatch('user/setLoginStatus', 0)
  location.reload()
 })
 } else {
 store.dispatch('user/setLoginStatus', 0)
 location.reload()
 }
 } else {
 // 已登录直接进入
 next()
 }
})

登录成功后存用户信息,token。访问所有的接口的时候都会在header携带token,如果token失效了,服务端会返回401,做退出操作,删除登录状态,用户信息,token,刷新页面重新进入。

request.js

// 登录超时,重新登录 
 if (res.status === 401) { 
 store.dispatch('user/fedLogOut').then(() => { 
 location.reload() 
 }) 
}

用户登录后将token和用户信息存入storage中,登录状态设置到cookie里,store user中主要是进行用户信息存贮获取删除的操作

store/modules/user.js

import { loginByCode } from '@/api/user'
import {
 saveToken,
 saveLoginStatus,
 saveUserInfo,
 removeToken,
 removeUserInfo,
 removeLoginStatus,
 loadLoginStatus,
 loadToken,
 loadUserInfo
} from '@/utils/cache'
const state = {
 loginStatus: loadLoginStatus(), // 登录状态
 token: loadToken(), // token
 userInfo: loadUserInfo() // 用户登录信息
}

const mutations = {
 SET_USERINFO: (state, userInfo) => {
 state.userInfo = userInfo
 },
 SET_LOGIN_STATUS: (state, loginStatus) => {
 state.loginStatus = loginStatus
 },
 SET_TOKEN: (state, token) => {
 state.token = token
 }
}

const actions = {
 // 登录相关,通过code获取token和用户信息
 loginWechatAuth({ commit }, code) {
 const data = {
 code: code
 }
 return new Promise((resolve, reject) => {
 loginByCode(data)
 .then(res => {
  // 存用户信息,token
  commit('SET_USERINFO', saveUserInfo(res.data.user))
  commit('SET_TOKEN', saveToken(res.data.token))
  resolve(res)
 })
 .catch(error => {
  reject(error)
 })
 })
 },
 // 设置状态
 setLoginStatus({ commit }, query) {
 if (query === 0 || query === 1) {
 // 上线打开注释,本地调试注释掉,保持信息最新
 removeToken()
 removeUserInfo()
 }
 // 设置不同的登录状态
 commit('SET_LOGIN_STATUS', saveLoginStatus(query))
 },
 // 登出
 fedLogOut() {
 // 删除token,用户信息,登陆状态
 removeToken()
 removeUserInfo()
 removeLoginStatus()
 }
}

export default {
 namespaced: true,
 state,
 mutations,
 actions
}

在根目录下.env开头的三个文件中设置微信appID

VUE_APP_WECHAT_APPID='12345678'复制代码

授权再也难不住我了,如果哪里有问题希望大家给我留言纠正,互相学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
Openlayers实现测量功能
Sep 25 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
浅谈一种让小程序支持JSX语法的新思路
Jun 16 #Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 #Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 #Javascript
简谈创建React Component的几种方式
Jun 15 #Javascript
JS中的一些常用的函数式编程术语
Jun 15 #Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 #Javascript
JavaScript工具库之Lodash详解
Jun 15 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
电力公司个人求职信范文
2014/02/04 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
2014年清明节寄语
2014/04/03 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL