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

63 浏览量更新于2023-03-03 评论 1 收藏 63KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了详解Vue微信授权登录前后端分离较为优雅的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过

来看看吧

微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一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等实现了授权登录　　

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38625442

粉丝: 6
资源: 950

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

微信模拟登陆抓取用户昵称和头像

vue 微信授权登录解决方案

平台接入-微信授权-前后端分离（jpg格式资源）

vue 微信登录一键授权

用vue编写一个微信授权登录页面

vue微信二维码扫码登录

vue3+springboot前后端分离项目

vue网页授权微信登录

vue 微信扫码登录

vue和django的前后端分离开发怎么实现

vue和springboot前后端分离

vue微信扫描二维码登录

vue和thinkphp前后端分离

关于vue和springboot前后端分离项目常问面试题

为什么要使用vue和springboot进行前后端分离项目开发

spring boot+vue 3 大型前后端分离项目实战 pdf

uniapp微信一键登录微信授权

vue＋springboot前后端分离项目

若依框架 ruoyi-vue 微信

微信小程序点餐系统前后端源码vue

会员权益专享

最新资源