用户点击微信网页进行授权,将会进行以下几个步骤:
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()
}
})