vue实现微信网页授权登录

附：微信官方文档

前言：在用vue做微信公众号网页项目的授权登录中踩过不少坑，在这里记录一下。首先在选择由后端做登陆还是前端传token登录的方式上产生了分歧。两种方式在不同的公司里都用过，后端做登陆无非是前端跳转到jsp或者php页面，后端把登录做了在跳转回页面，这种方式前端方便了，但是中途需要跳转多次，很影响体验，所以最终选择了前端传token的方法进行登录。

不想看过程的可以直接往下拉查看完整代码

一、授权流程

二、完整代码

一、授权流程

由微信的官方文档得知，授权登陆共分为四步：

其中，第一步由前端来做，第二步前端通过ajax把code传到后端，后端获取access_token，第三步第四步则需要后端完成。

写代码之前需要明确下需求，整理下思路，先想在写是个好习惯。

我们需要做的是：

1、前端在需要获取用户信息的页面调起登录，某些页面不需要，比如首页、某些展示静态页。

2、微信返回，前端截取返回url中的code传给后台，并把后台返回的token存到session和axios的header头中。

3、如果session中已经有token了，调另一个接口，判断token是否已经过期，过期重新登陆。

开始写代码。

因为单页面应用的url带着#，微信授权登陆回调对#支持不友好，所以我们把路由换成history模式，后台配合改一下，不然页面会404。

mode: "history"

在路由守卫的beforeEach中写登录代码

首先登录，1：

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"

白名单判断：

let noLoginArr = ["/"], isCur = false
for (let i of noLoginArr) {if (to.path == i) {isCur = true}
}
if (isCur) { //白名单内不做登录判断，直接nextnext()
}

登陆之后截取url中的code传给后台，2：

let data = {code: code
}
axios.post('/api/auth/code', data).then((res) => {if (res.code == 200) {sessionStorage.setItem("token", res.data.token)axios.defaults.headers.common['token'] = res.data.tokennext()} else if (res.code == 401) { //后台判断toke是否失效，失效返回401重新授权登陆//去登录window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}
}).catch(function (error) {
});

如果session中有token，3：

axios.defaults.headers.common['token'] = sessionStorage.getItem("token")
let data = {token: token
}
axios.post('/api/auth/checkToken', data).then((res) => { //判断token是否过期接口if (res.code == 200) {next()} else if (res.code == 401) { //后台判断toke是否过期，过期返回401重新授权登陆sessionStorage.setItem("token","")axios.defaults.headers.common['token'] = ""//去登录window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}
}).catch(function (error) {
});

说一下自己踩得一个坑：登陆之后，在当前页面不动等token过期，刷新页面。此时页面会不停的跳转

解决方案：每次登录时，去除回调url中的code和state，所以大家在页面间传值的时候不要使用code和state关键词。

二、完整代码

以下是完整代码：

const routes =[// 你的路由
]
const router = new VueRouter({mode: "history",routes
})function delCodeandstate(to) { //函数作用：去除url中的code和statelet path = ""for (let i in to.query) {if (i != "code" && i != "state") {path = path + "&" + i + "=" + to.query[i]}}path = path == "" ? "" : path.substring(1, path.length)path = path == "" ? "" : "/?" + pathreturn path;
}router.beforeEach((to, from, next) => {let fullPath = to.fullPathif (to.fullPath.includes("code")) { //判断url中是否有code，踩坑1-页面反复跳转fullPath = delCodeandstate(to)}let redirect_uri = encodeURIComponent("http://xxx.com" + fullPath), appid = "你的小程序appid" //redirect_uri，授权登陆后的回调地址，需要进行encodeURIComponent处理let code = to.query.code, state = to.query.statelet noLoginArr = ["/"], isCur = false, token = sessionStorage.getItem("token") //noLoginArr，白名单，不需要授权登陆的页面for (let i of noLoginArr) {if (to.path == i) {isCur = true}}if (isCur) { //白名单内不做登录判断，直接nextnext()} else {if (code && state && !token) { //登陆之后获取到code，传到后台登录let data = {code: code}axios.post('/api/auth/code', data).then((res) => {if (res.code == 200) {sessionStorage.setItem("token", res.data.token)axios.defaults.headers.common['token'] = res.data.tokennext()} else if (res.code == 401) { //后台判断toke是否失效，失效返回401重新授权登陆//去登录window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}}).catch(function (error) {});} else if (token) { //已登录，有token，判断是否过期axios.defaults.headers.common['token'] = sessionStorage.getItem("token")let data = {token: token}axios.post('/api/auth/checkToken', data).then((res) => { //判断token是否过期接口if (res.code == 200) {next()} else if (res.code == 401) { //后台判断toke是否过期，过期返回401重新授权登陆sessionStorage.setItem("token","")axios.defaults.headers.common['token'] = ""//去登录window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}}).catch(function (error) {});} else { //未登录，没有token，去登录//去登录window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}}
})
export default router