详解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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript数组复制详解
Feb 02 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
浅谈一种让小程序支持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
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
php工具型代码之印章抠图
2018/07/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
使用rollup打包JS的方法步骤
2018/12/05 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
收集的几个Python小技巧分享
2014/11/22 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
中间件分为哪几类
2012/03/14 面试题
什么是GWT的Entry Point
2013/08/16 面试题
《鱼游到了纸上》教学反思
2014/02/20 职场文书
总经理岗位职责
2015/02/04 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Redis数据结构之链表与字典的使用
2021/05/11 Redis