【总结】有关vue使用微信扫码登录的一点小总结

上个月用vue做一个管理台，后期登录改成了微信扫码登录。要说vue也是遇到了不小的困难，毕竟以前连js用的都不是很利索。不过今天想先写之前困扰了我好几天的微信登录。

前期也参考了很多很多大神做的项目，但是由于本人才疏学浅所以有些地方免不了用一用自己的笨办法了，如果各位看官有什么更好的方法或者意见欢迎一起交流！！！

在这里比较多的参考了这篇【点我】。

啥都不说了，先上代码:

router.beforeEach((to, from, next) => {
  if(window.location.href.indexOf('code')>=0){
    //如果url中包含code,则保存到store中
    let code = window.location.href.split("?")[1];
    code = code.substring(5,code.indexOf('&'));
    store.state.code = code;
  }

  if(to.path == '/login' && store.state.user) {
    next('/')
    return false
  }else if((!sessionStorage.getItem("userid") || !store.state.user) && to.path != '/login'){
    // 第一次进入项目
    //store.state.beforeLoginUrl = to.fullPath; // 保存用户进入的url
    next('/login')
    return false
  }else if(!store.state.user && to.path != '/login'){
    // 之前有获取过授权
    next('/login')
    return false
  }
  next()
})

首先前边一段判断url中有没有code是因为，微信登录然后redirect之前的url中会包含获取token用的code,如果不把他保存下来页面就会一直跳转到login（感觉我用的这个方法比较笨）。

之后下边这一段就是判断vuex中有没有保存登录状态，sessionStorage中有没有保存userid了（userid是传给后端登录用的），如果都没有辣么也跳转到login。

然后继续码，login页面：

created() {
      this.url = 'https://open.weixin.qq.com/connect/qrconnect?appid='+this.appid + '&redirect_uri='+ this.redirect_uri +'&response_type=code&scope=snsapi_login#wechat_redirect';
      /*************************************************************/
      if(sessionStorage.getItem("userid")){
        this.login();
        //如果sessionStorage中有userid,执行login
      } else if(this.$store.state.code){
        //如果只是有code
       let _self = this;
        //发请求，用code换token
        this.$axios({
          method: 'post',
          url: this.baseURL + "/login",
          data: {
            code: this.$store.state.code
          }
        })
        .then(function(response){
        //token和登录状态先保存在sessionStorage里
          sessionStorage.setItem("token",response.data.token);
          sessionStorage.setItem("userid",response.data.userid);
      })
      .catch(function(error){
        console.log(error);
      })
      }
      else{
        let self=this;
        if (self && !self._isDestroyed) {
          //如果失败了还是弹二维码
          window.location = self.url;
        }
      }
    }

没有先把token放在请求头里有一个考虑就是，如果用户有登录状态（vuex中有userid）登录时，header设置貌似失效要重新配置，而这个时候因为没有保存所以必须重新扫码登录，所以就把header设置放到了login中。

login函数:

login() {
        let userid = {'userid': sessionStorage.getItem("userid")};
        //token放到header里，一定要加Bearer空格
        this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + sessionStorage.getItem("token");
        console.log('axios headers Authorization set!');
        let _self = this;
        //登录请求
        this.$axios({
          method: 'get',
          url: this.baseURL + "xxx",//向后端请求的地址
          data: {
            userid: sessionStorage.getItem("userid")
          }
        })
        .then(response => {
          if(response.status==200){
            _self.$store.state.user = response;
            _self.$router.push('/');
            beforeLoginUrl+_self.$store.state.adminNav);

          } else{
            if(sessionStorage.getItem("userid")){
              window.location = _self.url;
            }
          }
        })
        .catch(function(error){
          console.log(error);
          window.location = _self.url;
        })