微信授权登录是一个很常见的场景。 通过使用微信授权登录，我们可以轻松获取用户的一些信息，并通过用户唯一的公众账号建立数据库来绑定用户的身份。

微信授权登录的机制这里不再详细介绍。 微信官方文档已经详细描述了。 简单描述就是跳转到微信授权页面。 用户点击确认后，微信会跳转到回调页面。 此时回调页面URL中会携带code参数。 通过code参数，后端可以交换code以获取支持或用户信息。

在vue项目中，通常是SPA应用，即所有页面都是相同的html。 目前的开发通常前端和后端是完全分离的。 vue打包后生成的纯静态文件甚至不需要经过服务器，所以通过后端进行跳转之类的并不是很优雅。 本文介绍此类场景下的微信授权登录。

对于 Vue SPA 应用程序，我们通常可能有很多页面。 在微信公众号上，我们可能会配置多个菜单。 多个菜单对应Vue的路由页面。 然而，并非每个页面都需要用户授权才能进入。 有些Page用户需要能够在不登录的情况下进行预览，这时候我们就可以使用vue来实现前端路由拦截。

router.beforeEach(async (to, from, next) => { if (to.matched.some(recode => recode.meta.noAuth)) { next() } else { // store已存在用户信息直接进入页面 if (store.state.userInfo.nickname) { next() return } const code = getUrl(window.location.href).code // 截取url上的code ,可能没有,则返回''空字符串 let res = await api.post('/imsl/user/user-auth', {code}) // 获取用户信息,后端可首先通过cookie,session等判断,没有信息则通过code获取 console.log(res) // 返回用户信息 if (res.code === 200 && res.data.is_auth) { store.commit('setUserInfo', res.data) next() } else { // 此状态根据业务需求 可能不存在 if (res.code === 201) { const openid = res.data.openid console.log(openid) store.commit('setOpenid', openid) localStorage.setItem('openid', openid) next('/enlist-info') } // 上面的获取用户信息接口,如果cookie,session拿不到用户信息,且传递的code为空,则跳转到微信授权页面 if (res.code === 202) { console.log(window.location.origin) console.log(to.fullPath) // 这个redirectUrl用 当前页路径或者tof.fullPath(将要进入的路径) let redirectUrl = window.location.href redirectUrl = encodeURIComponent(redirectUrl) console.log(redirectUrl) const appid='wxdff0642c2120ea39' window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect` } } } })

上面的代码基本上解释了一个授权过程。 首先，在配置vue路由的时候，我们设置这个路由是否需要登录，即在meta中添加一个:true属性。 这是为了处理不需要登录的页面，并通过判断。 ，如果是不需要:的页面，则直接next()让它进入对应的页面。 对于需要登录的页面，让后端配合。 这时后端写一个获取用户信息的接口，前端直接调用获取用户信息的接口，当然不需要每个页面都调用。 获取一次后，就可以将用户信息存储到vuex中，所以通过判断vuex中是否有用户信息，如果用户信息已经存在，则进入页面。 没有用户信息，则调用后端接口获取用户信息。 说到这里，我们终于回到了本文的主题。 通过微信授权登录获取用户信息。 这时候后端如何获取用户信息呢？ 这里，可以按照后端协商好，用户绑定身份后，后端可以通过设置等保存用户的登录状态，如果有相关状态，后端可以直接返回用户信息。 如果是第一次进入，或者课程过期后，此时会调用微信授权登录。 如上面代码所述，分为三种情况：

1.通过等方式，后端直接获取用户信息。 此时获取到用户信息，直接进入页面。 同时，用户信息存储在vuex中。

2、如果没有用户信息，此时还没有用户信息，那么需要再次调用微信授权登录。 上面给出的两个返回码是 code=201 和 code=202。 当code=2时，前端会直接跳转到微信授权页面，也就是你即将进入的页面。 这个时候会发生什么？ 会跳转到微信授权页面。 用户点击后，返回到该页面。 不同之处在于 url 已经带有代码。 ，前端通过字符串拦截得到code并发送给后端，后端可以交换code和用户信息。

总结：

项目采用前后端完全分离的方式，即打包后提供的纯静态文件放在服务器上。 访问.html时，后端不会在接口处拦截。 后端无需跳转到微信授权登录页面。 前端路由拦截跳转，实现方法如下： 3、前端通过vue-的钩子函数拦截需要用户身份才能进入的页面。 此时会调用获取用户信息的接口。 后端首先通过获取等方式确定用户，如果没有相关信息则返回201或202。 当返回202时，前端跳转到微信授权页面，也就是要进入的页面的URL。 跳转授权后，微信会携带该URL上的代码，返回当前页面。 这时前端会拦截URL上的代码，并将其传递给后端。 后端处理代码获取用户信息，然后实现授权登录。