一. vue之微信授权登录

写一下vue开发移动端中遇到各种问题及解决办法，前端使用element-ui

1.前提必备

微信网页开发 /网页授权

2.申请公众号测试

申请测试公众号

3.公众号配置

4.公众号配置完成，打开项目封装axios请求

新建 request.js

import axios from "axios";

export function WxRequest(config) {
  const Wxinstance = axios.create({
    baseURL: 'https://api.weixin.qq.com',
    timeout: 5000,
  })

  Wxinstance.interceptors.request.use(config => {
    return config
  },error => {

  })

  Wxinstance.interceptors.response.use(config => {
    return config.data
  },error => {

  })

  return Wxinstance(config)
}

新建wx.js

import {WxRequest} from "./request";

export function getWxOpenidAndToken(appid,secret,code){
    return WxRequest({
        method: 'GET',
        url:'/sns/oauth2/access_token?appid='+appid+'&secret='+secret+'&code='+code+'&grant_type=authorization_code'
    })
}

export function getWxUserMessage(access_token,openid){
    return WxRequest({
        method: 'GET',
        url:'/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN'
    })
}

5.处理微信登录页面

新建login.vue

<template>
  <div>main</div>
</template>

<script>

import NavBar from "./NavBar";
import {getWxOpenidAndToken,getWxUserMessage} from '../../network/wx'

export default {
  name: "News",
  components: {
    NavBar
  },
  data() {
    return {
      appid: '申请的appid',
      secret:'申请的asecret',
      code:''
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode () { // 非静默授权，第一次有弹框
      this.code = ''
      var local = window.location.href // 获取页面url
      this.code = this.getUrlCode().code // 截取code
      if (this.code == null || this.code === '') { // 如果没有code，则去请求
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
      }
      else {
        getWxOpenidAndToken(this.appid,this.secret,this.code).then(function (res)
        {
          if (res.access_token!=undefined){
            getWxUserMessage(res.access_token,res.openid).then(function (resdata){
              console.log(resdata);
            })
          }
        })
      }
    },
    getUrlCode() { // 截取url中的code方法
      var url = location.search
      this.winUrl = url
      var theRequest = new Object()
      if (url.indexOf("?") != -1) {
        var str = url.substr(1)
        var strs = str.split("&")
        for(var i = 0; i < strs.length; i ++) {
          theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
        }
      }
      return theRequest
    }
  }
}
</script>

<style scoped>


</style>

6.启动项目 访问login页面触发微信登录

1.打开页面重定向，获取code

this.code = ''
var local = window.location.href // 获取页面url
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') { // 如果没有code，则去请求
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
}

2.getWxOpenidAndToken：获取openid和token

3.getWxUserMessage：获取用户信息

拿到用户信息，通过接口存到后台，返回一个token传给前端保存起来，前端每次发起接口请求把token返回给服务端多验证