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..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) { //白名单内不做登录判断，直接next next() } 

登陆之后截取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.token next() } else if (res.code == 401) { //后台判断toke是否失效，失效返回401重新授权登陆 //去登录 window.location.href = "https://open.weixin..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..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和state let 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 == "" ? "" : "/?" + path return path; } router.beforeEach((to, from, next) => { let fullPath = to.fullPath if (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.state let noLoginArr = ["/"], isCur = false, token = sessionStorage.getItem("token") //noLoginArr，白名单，不需要授权登陆的页面 for (let i of noLoginArr) { if (to.path == i) { isCur = true } } if (isCur) { //白名单内不做登录判断，直接next next() } 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.token next() } else if (res.code == 401) { //后台判断toke是否失效，失效返回401重新授权登陆 //去登录 window.location.href = "https://open.weixin..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..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..com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect" } } }) export default router