详解Vue微信授权登录前后端分离较为优雅的解决方案


Posted in Javascript onJune 29, 2018

微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份.

微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息

在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后生成的纯静态文件,甚至可以不经过服务器,所以通过后端弄跳转之类的都不太优雅,本文即介绍此类场景的微信授权登录

对于一个vue的SPA应用,我们通常可能有很多页面,在微信公众号上我们可能配置多个菜单,多个菜单对应vue的路由页面,但是可能并不是每个页面都需要用户授权才能进入,有些页面用户不登录也需要可以预览,此时我们可以通过vue router来实现前端路由拦截

router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
  next()
 } else {
  // store已存在用户信息直接进入页面
  if (store.state.userInfo.nickname) {
   next()
   return
  }
  const code = getUrl(window.location.href).code // 截取url上的code ,可能没有,则返回''空字符串
  let res = await api.post('/imsl/user/user-auth', [code]) // 获取用户信息,后端可首先通过cookie,session等判断,没有信息则通过code获取
  console.log(res)
  // 返回用户信息
  if (res.code === 200 && res.data.is_auth) {
   store.commit('setUserInfo', res.data)
   next()
  } else {
   // 此状态根据业务需求 可能不存在
   if (res.code === 201) {
    const openid = res.data.openid
    console.log(openid)
    store.commit('setOpenid', openid)
    localStorage.setItem('openid', openid)
    next('/enlist-info')
   }
   // 上面的获取用户信息接口,如果cookie,session拿不到用户信息,且传递的code为空,则跳转到微信授权页面
   if (res.code === 202) {
    console.log(window.location.origin)
    console.log(to.fullPath)
    // 这个redirectUrl用 当前页路径或者tof.fullPath(将要进入的路径)
    let redirectUrl = window.location.href
    redirectUrl = encodeURIComponent(redirectUrl)
    console.log(redirectUrl)
    const appid='wxdff0642c2120ea39'
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   }
  }
 }
})

上述代码基本阐述了一个授权的过程,首先,我们在配置vue路由的时候,设置此路由是否需要登录即给router的meta加一个noAuth:true的属性,这个是处理不需要登录的页面,通过router.beforeEach进行判断,如果是不需要登录的页面:noAuth,则直接next()让其进入相应页面.对于需要登录的页面,则让后端配合,此时,后端写一个获取用户信息的接口,前端则直接调用获取用户信息的接口,当然,不需要每个页面都调用,获取一次之后可以将用户信息存入vuex中,所以通过判断vuex里面有没有用户信息,如果已存在用户信息,则进入页面.没有用户信息那就调用后端获取用户信息的接口,说到这里,终于回到此文主题了,用户信息是通过微信授权登录拿到的,此时后端如何拿到用户信息呢?这里,可以跟后端商议好,用户绑定身份后,后端则可以通过设置cookie,token之类的保存这个用户登录状态,如果有相关状态,那么后端则可以直接返回用户信息. 如果是首次进入,或者cookie,token之类的已失效,那么此时则会调用微信授权登录了,如上述代码所述,分为三种情况,

1. 通过cookie,token等,后端直接拿到了用户信息,此时则拿到用户信息直接进入页面,同时把用户信息存入vuex中

2. 没有用户信息的情况,此时也没有cookie,token,那就需要重新调用微信授权登录了,上面给出的两种返回码code=201,code=202的情况,当code=2是则由前端直接跳转到微信授权页面,而redirectUri则为将要进入的页面,此时会发生什么呢?会跳到微信授权页面,用户点击之后又回到了这个页面,不同的是此时url上面已经携带了code,前端通过字符串截取拿到code,发送给后端,后端即可通过code换取openid以及用户信息了.

总结:

  1. 项目采用前后端完全分离方式,即打包后给的纯静态文件放在服务器,访问index.html
  2. 后端不在接口处拦截,不需要后端跳转微信授权登录页面,由前端路由来拦截跳转,实现方法如3.
  3. 前端在需要用户身份才能进入的页面通过vue-router的 router.beforeEach钩子函数拦截,此时调用获取用户信息接口,后端首先通过获取cookie,token等判断用户,无相关信息返回201或202,当返回202的时候,前端跳转到微信授权页,redirecturi即为要进入的页面的url,跳转授权后微信会在url上面携带code回到当前页,此时前端截取url上的code传给后端,后端通过code在后端处理拿到用户信息,openid等实现了授权登录

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

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 #Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 #Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 #Javascript
浅谈vue首屏加载优化
Jun 28 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php数据访问之查询关键字
2016/05/09 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
node.js中的console用法总结
2014/12/15 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python设置随机种子实例讲解
2019/09/12 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python实现连连看游戏
2020/02/14 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
快速了解Python开发环境Spyder
2020/06/29 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
食品安全工作实施方案
2014/03/26 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
政风行风建设整改方案
2014/10/27 职场文书
优秀党员个人总结
2015/02/14 职场文书
复试通知单模板
2015/04/24 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers
MySQL 数据类型详情
2021/11/11 MySQL