在 vue-cli 实现微信授权登录

1.第一步，首先要申请微信公众号测试账号

微信公众平台接口测试帐号申请

2.第二步，关注测试号（重要！否则无法实现授权登录）

3.第三步，阅读微信网页授权文档

阅读文档，编辑你的微信授权链接
图中要填的域名要和你编辑的授权链接中 redirect_uri (授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理)要一致(域名一致)

4.第四步在router中做登录判断，这里我贴上我的代码

router.beforeEach(function (to, from, next) {
  // 未登录的情况下尝试进入非登录页
  if (to.path !== '/author') {
    let _token = localStorage.getItem('token')
    // 如果没有token，则让它授权
    if (!_token) {
      // 保存当前路由地址，授权后还会跳到此地址
      // sessionStorage.setItem('beforeUrl', to.fullPath)
      // 授权请求，并跳转 /author 界面（我这里的链接是模拟）
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect '
    } else {
      next()
    }
  } else {
    next()
  }
})


//  /author获取url传递过来的CODE传给后台
<template>
  <div></div>
</template>

<script>
import { wxloginRedirect } from '@/utlis/request'
import { mapMutations } from 'vuex'
export default {
  name: 'Author',
  computed: {},
  created () {
    // 如果连接能拿到code此时token没有或者过期，需要重新获取token
    // 获取GET传递的参数
    function getRequestString (name) {
      // 获取?后的字符串
      let str = window.location.search.substr(1)
      let strs = str.split('&')
      let params = {}
      for (let i = 0; i < strs.length; i++) {
        let item = strs[i].split('=')
        let key = item[0]
        let value = item[1]
        params[key] = value
      }
      // console.log(params)
      return params
    }
    // alert(this.$route.query.code)  code在url中间，所以无法直接获取
    // alert(window.location.search)
    if (getRequestString().code) {
      let code = getRequestString().code
      wxloginRedirect({
        code
      }).then((result) => {
        let res = result.data
        if (res.code === 1) {
          // 将获取到的token进行存储
          this.setAccontToken(res.token)
          localStorage.setItem('token', res.token)
          // 登入成功返回到首页
          this.$router.push({
            path: '/'
          })
        } else {
          alert(res.msg)
        }
      })
    }
  },
  methods: {
    ...mapMutations([
      'setAccontToken'
    ])
  }
}
</script>

<style lang="stylus" scoped></style>

这样就实现了微信网页授权登录