详解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清除input中type等于file的值域(示例代码)
Dec 24 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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
组合算法的PHP解答方法
2012/02/04 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
解决Mac下使用python的坑
2019/08/13 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Pycharm中如何关掉python console
2020/10/27 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
项目经理的岗位职责
2013/11/23 职场文书
微博营销计划书
2014/01/10 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
党员民主评议个人总结
2014/10/20 职场文书
社区工作者个人总结
2015/02/28 职场文书
运动会入场词
2015/07/18 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
python区块链持久化和命令行接口实现简版
2022/05/25 Python