天天看点

前后端分离项目之微信端网页授权处理

在微信公众号中内嵌H5网页,在需要获取用户信息或者需要用到微信公众号开发相匹配的api时,需要拉取微信授权,在非前后端分离的项目中,这部分是由服务端一并完成的,在前后端分离的项目中,根据微信公众号开发者文档,也可以很清楚地知道,拉取授取处理逻辑中最重要的一点就是,先获取code跟state,再根据取到的值发起授权请求,在前后端分离的项目中,最核心的一点是,构建一个授权中转页,需要授权的路由在判断没有授权的情况下,转入这个授权中转页,这个页面主要处理两件事,第一件:

发起微信提供出来的获取code跟state的接口的请求,第二件:将携带code跟state参数的结果地址重定向回授权页面

主要代码抽取如下:

ajax.getCode({redirect_uri: window.location.origin + url}).then(res => {
    window.location.href = res.redirectUrl
})

// 再次进入授权页面时,已经携带了code及state
ajax.login({code: window.location.search.code, state: ''}).then(res => {
    console.log(res.token)
    console.log('已授权成功')
})
           

继续阅读