Vue微信授权登录是用于分离前端和后端的更优雅的解决方案

微信授权登录是一种非常常见的情况. 使用微信授权登录，我们可以轻松获取用户的一些信息，并建立一个，通过用户的唯一openid将用户身份绑定到公共帐户.

微信授权登录机制在此不再详述. 微信官方文件已经详细介绍. 简要说明是跳转到微信授权页面. 用户单击“确认”后，微信将跳转至回调页面. 这时cc短信拦截，回调页面URL的code参数将被携带. 通过code参数cc短信拦截，后端可以交换代码以获得openid支持或用户信息

<其余内容|剩余全文>

在vue项目中，它通常是一个SPA应用程序，即所有页面都是相同的html，现在通常开发也从前端和后端完全分离开了，纯静态文件在vue打包后生成，甚至无需通过服务器，因此跳到后端等不是很优雅，本文介绍了针对这种情况的微信授权登录

对于vue SPA应用程序，我们通常可能会有很多页面. 在微信公众号上，我们可以配置多个菜单. 多个菜单对应于vue路由页面，但并非每个页面都可能需要用户授权. 回车，一些页面用户需要能够不登录而进行预览，这时我们可以使用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添加noAuth: true属性. 这是为了处理那些不需要登录. ，由router.beforeEach判断，如果它是不需要登录的页面: noAuth，则直接next（）让它进入相应的页面. 对于需要登录的页面，让后端配合，这时，后端写一个用户获取信息的接口，前端直接调用该接口获取用户信息. 当然，不需要用户信息获取后，可以将用户信息存储在vuex中，因此通过判断vuex中是否存在用户信息，如果已经存在用户信息，则进入该页面. 如果没有用户信息，则调用后端获取用户信息界面. 话虽如此，我终于回到本文的主题. 用户信息是通过微信授权登录获取的，此时如何获取后端用户信息呢？在这里，您可以与后端进行协商. 在将用户绑定到身份之后，后端可以通过设置cookie和令牌来保存此用户登录状态. 如果存在相关状态，则后端可以直接返回用户. 信息. 如果是第一次进入，或者cookie，令牌等已过期，则我们将调用WeChat授权进行登录，如上面的代码所述，分为三种情况，

1. 后端通过cookie，令牌等直接获取用户信息. 此时，直接将用户信息访问该页面，并将用户信息同时存储在vuex中

2. 如果没有用户信息，并且此时没有cookie或令牌，那么我们需要致电微信进行授权并再次登录. 上面给出的两个返回码是code = 201和code =202. 2是直接从前端跳转到微信授权页面，redirectUri是要输入的页面. 这时候会发生什么？跳转到微信授权页面，用户点击后返回该页面，不同的是这次url已经携带了代码，前端通过字符串截取获取代码并将其发送给后端后端可以通过代码交换openid和用户信息.

摘要:

该项目使用了前端和后端的完全分离，即将打包的纯静态文件放置在服务器上，对index.html后端的访问未在接口上被拦截，并且后端不需要跳转到前端路由跳转所拦截的微信授权登录页面，实现方法如下: 3.需要用户身份输入的前端页面被vue-router路由器拦截.beforeEach钩子函数. 这时，将调用获取用户信息的接口，后端首先通过获取cookie和令牌来判断用户. 相关信息返回201或202. 返回202时，前端跳转到微信授权页面，redirecturi是要输入页面的URL. 跳转授权后，微信将URL中的代码携带并返回到当前页面. 此时，前端拦截url中的代码并将其传递给后端，后端通过后端处理中的代码，openid等获取代码的用户信息. 实现授权登录

查看原始文章

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-224001-1.html