vue的微信网页授权

参考:微信官方平台、前辈的经验和网络优秀案例的参考

用户点击微信网页进行授权,将会进行以下几个步骤:

1.用户访问网站

2.通过是否有用户信息和cookie来判断是否第一次登陆。

若是两者都没有,那就是第一次登陆。那么就要通过api申请微信授权地址,获取后用户自动跳转到微信授权页面信息。微信服务器发起回调请求,这时回调到服务器端。

若是没有用户信息,那说明页面刷新后vuex内存储内容丢失,将服务器中的用户信息传递给vuex中。

其余的可以登陆。

3.服务器端存储用户信息,进行注册登录操作(记录cookie),重定向到vue客户端

4.重复第一步,授权登陆成功。

ps:cookie是啥?

        cookie,服务器通过response设置"set-cookie"头是映射的值("若干个用;隔开的键值对")

       客户端访问服务器,服务器有一个专用的叫做"Set-Cookie"相应头,该头的值是一个键值对,客户端接收到set--Cookie,自动将他保存到客户端

  当客户端再次访问服务器时,之前的保存到客户端的cookie信息自动加载到请求头的信息中(请求头名叫Cookie,值就是之前保存到客户端的键值对),发送给服务器,服务器通过response,getHeader(“Cookie”)就能获取相应的键值对的信息了

具体代码如下:

router.beforeEach((to, from, next) => {

if ((!VueCookies.get('wxssid') && !store.state.userName)) {

// 第一次访问

back.tokenAddGet().then(function (response) {

var data = response

if (data.errno === 0) {

window.location.href = data.data.address

}

})

} else if (!store.state.userName) {

// 非第一次访问,输入登录信息

back.userInfoQue().then(function (response) {

var data = response

if (data.errno === 0) {

store.dispatch('setUserName', response.data.nickName)

store.dispatch('setHeadImgUrl', response.data.headImgUrl)

next()

}

})

next()

} else {

// 已登录

next()

}

})

猜你喜欢

转载自blog.csdn.net/qq_34633111/article/details/81146174