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()

}

})