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

微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份.
微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息

<The rest of contents | 余下全文>
  在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-routerrouter.beforeEach钩子函数拦截,此时调用获取用户信息接口,后端首先通过获取cookie,token等判断用户,无相关信息返回201或202,当返回202的时候,前端跳转到微信授权页,redirecturi即为要进入的页面的url,跳转授权后微信会在url上面携带code回到当前页,此时前端截取url上的code传给后端,后端通过code在后端处理拿到用户信息,openid等实现了授权登录
    查看原文https://blog.noob6.com/2018/06/16/the-best-way-to-resolve-wechat_auth-in-vue/
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,729评论 6 517
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,226评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 169,461评论 0 362
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,135评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,130评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,736评论 1 312
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,179评论 3 422
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,124评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,657评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,723评论 3 342
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,872评论 1 353
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,533评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,213评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,700评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,819评论 1 274
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,304评论 3 379
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,876评论 2 361

推荐阅读更多精彩内容