详解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 相关文章推荐
js关闭父窗口时关闭子窗口
Apr 01 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
基于ionic实现下拉刷新功能
May 10 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
JavaScript控制台的更多功能
Apr 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
Linux的主要特性
2014/10/06 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
母婴店促销方案
2014/03/05 职场文书
大学生就业意向书范文
2014/04/01 职场文书
班委竞选稿范文
2015/11/21 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript