Vue项目处理公众号登录

项目场景

​ 公司要开发一个挂载到微信公众号上的web项目，后台需要登录时给他发送 用户名+密码+code 他通过code去微信平台取到openid，然后将openid保存在用户表中且返回给前端。

​ 前端对openid进行存储，当用户进入时判断openid，可以直接登录。

code与openid

code是用户登录凭证（有效期五分钟）,使用 code 可换取 openid、unionid、session_key 等信息

​ 获取用户 openid

​ 第一步：调用 wx.login(),获取临时 code

​ 相关文档 https://developers.weixin.qq....

​ 第二步：将获取到的 code 发送给后台换取 openid

​ 相关文档 https://developers.weixin.qq....

前端代码设计

一、挂在公众号菜单处的路由为： http：//------/access，在此路由进行openid判断，有则进入项目主页，没有去微信后台取code，并返回公众号网页授权处配置的跟路由（登录界面） ------/

Access.vue

export default {
  created() {
      //获取localStorage中的openid判断
    let openid = localStorage.getItem('openid')
    if (openid == null||openid=='') {
      //空时执行取code方法（必须在微信客户端或开发者工具中执行，会有一次跳转请求）
      this.getToken()
    }else{
      login('','','',openid).then(res=>{
        if(res){
          //将用户信息存储到vuex中，且直接进到首页
          this.$store.commit('login/putUserInfo',res.data)
          this.$router.replace('/home')
        }
      })
    }
  },
  methods: {
    getToken: function() {
      var url =
          "https://open.weixin.qq.com/connect/oauth2/authorize?        
          appid="--此处填写公众号的appid--"&redirect_uri=" +
          encodeURIComponent(
          "--此处填写公众号配置的后台接口地址--"
          ) +
"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect&connect_redirect=1#wechat_redirect";
      location.href = url;
    }
  }
}

getToken执行完毕后，跳到登录页面路径会变成 “http://-----/login?code=12344...

二：登录路由页处理链接中的code

login.vue

created() {
    this.code = this.GetQueryString("code");
},
methods: {
    //截取URL字段
    GetQueryString: function(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
}

这样就基本解决了，我是新手，大家有更好的方案欢迎探讨。