详解Vue微信授权登录前后端分离较为优雅的解决方案

在前后端分离的架构中，实现Vue微信授权登录是一个常见的需求。这种优雅的解决方案主要针对Vue.js单页应用（SPA）场景，确保用户在访问特定页面时能够顺畅地完成微信授权，同时保持良好的用户体验。以下将详细介绍这个过程。 微信授权登录的基本流程包括：用户点击微信登录按钮，系统跳转至微信授权页面，用户同意授权后，微信重定向回应用设定的回调地址，并在URL中附带code参数。后端接收到code后，通过调用微信API换取用户的openid和（或）用户信息。 在Vue项目中，由于SPA的特性，所有页面都在同一个HTML文件中，通常使用Vue Router进行页面导航。为了处理授权登录，可以在Vue Router的全局前置守卫`router.beforeEach`中进行拦截判断。以下代码展示了如何实现这一逻辑： ```javascript router.beforeEach(async (to, from, next) => { // 检查目标路由是否需要登录 if (to.matched.some(record => record.meta.noAuth)) { next(); // 如果不需要登录，直接进入 } else { // 如果store中已存在用户信息，则直接进入页面 if (store.state.userInfo.nickname) { next(); return; } // 从URL中获取code const code = getUrl(window.location.href).code; // 调用后端接口获取用户信息 let res = await api.post('/imsl/user/user-auth', [code]); console.log(res); // 如果成功获取到用户信息并已授权 if (res.code === 200 && res.data.is_auth) { store.commit('setUserInfo', res.data); // 存储用户信息 next(); } else { // 其他可能的状态处理，如无用户信息但有openid if (res.code === 201) { store.commit('setOpenid', res.data.openid); localStorage.setItem('openid', res.data.openid); next('/enlist-info'); // 跳转到特定页面 } // 未获取到用户信息且code为空，跳转到微信授权页面 if (res.code === 202) { const redirectUrl = encodeURIComponent(window.location.href); 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`; } } } }); ``` 这段代码首先检查目标路由是否需要用户登录，若不需要，则直接进入。如果需要，它会查看store中是否已存储用户信息。如果未存储，代码会尝试从URL中获取code，然后调用后端接口以获取用户信息。不同的返回码对应不同的处理方式，如设置openid、跳转到特定页面或引导用户进行微信授权。 后端的角色在于接收code，验证并兑换openid，以及可能的用户信息。通常，后端会先检查session或cookie中的用户状态，如果没有，再使用code向微信API请求数据。兑换成功后，后端应将openid及相关用户信息返回给前端，前端则将其保存在store中，以便后续页面访问。 总结起来，这个优雅的解决方案利用了Vue Router的导航守卫、本地存储、后端接口调用以及微信API，实现了在SPA中无缝集成微信授权登录。这种方式既保持了用户导航的流畅性，又确保了敏感页面的安全性。