微信强制请缓存和授权登录,vue框架

本文介绍了如何实现微信内置浏览器中的自动登录功能及登录状态检查,同时详细讲解了微信分享配置的具体步骤,包括初始化配置和分享内容设定等。
import  store  from  ' ./vuex/store '
import  cookie  from  ' ./libs/cookie '

// 路由预先判断
router . beforeEach( ( to ,  from ,  next )  =>  {
  // 首先判断是否已有用户登录信息userInfo
  if ( store . state . user . info{
     next()
   }  else  {
    // 强制给index.html 加上时间戳
     if ( document . URL . indexOf( ' index.html?t= '<  0{
       let  timestamp  = ( new  Date()) . valueOf()
       window . location . href  =  ' /index.html?t= '  +  timestamp  +  ' # '  +  to . fullPath
     }
     let  ua  =  window . navigator . userAgent . toLowerCase()
    // 判断微信客户端
     if ( ua . indexOf( ' micromessenger '>  1{
      // 首先获取授权cookie authid
       let  authid  =  cookie . get( ' authid ')
       if ( authid{
         Vue . http . post( ' /index.php/weixin/Auth/auth ' ,  { authid :  authid }) . then( ( response )  =>  {
           let  res  =  response . data
           if ( res . code  ===  ' 04 '{
             cookie . del( ' authid ')
             window . location . href  =  ' 404.html '
           }  else  if ( res . code  ===  ' 01 '{
             store . dispatch( ' setUserInfo ' ,  res . userInfo)
             next()
           }
         },  ( response )  =>  {})
       }  else  {
        // 强制跳转,授权登录,并设置cookie
         window . location . href  =  ' /index.php/weixin/Auth/redirect?redirect= '  +  encodeURIComponent( document . URL)
       }
     }  else  {
      //  非微信客户端
       Vue . http . post( ' /index.php/weixin/Auth/auth ' ,  {openid :  cookie . get( ' openid ') }) . then( ( response )  =>  {
         let  res  =  response . data
         if ( res . code  ===  ' 04 '{
           cookie . del( ' authid ')
           next()
           // window.location.href = '/index.php/weixin/Auth/redirect?redirect=' + encodeURIComponent(document.URL)
         }  else  if ( res . code  ===  ' 01 '{
           store . dispatch( ' setUserInfo ' ,  res . userInfo)
           next()
         }
       },  ( response )  =>  {})
     }
   }

})

一、微信自动登录

复制代码
 //定义事件
  methods:{
     //判断是否微信登陆 是不是微信浏览器
    isWeiXin() {
      let ua = window.navigator.userAgent.toLowerCase();
      console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
      } else {
      return false;
      }
    },
    test(){
        if(this.isWeiXin()){
        //微信登录,接口由后台定义
          this.$http.get('/wx/index/login/type/2').then((res) => {    
            if(res.data.code==0){   //微信登录成功跳转个人中心
                this.$router.push({
                    name:'UserHome',
                })
            }else{                //微信登录失败,使用填写信息登录
                this.$router.push({
                    name:'Login',
                })
            }
          })
    }
复制代码

 

复制代码
  //页面加载后执行
  mounted(){
      if(this.isWeiXin()){    //是来自微信内置浏览器
        // 获取微信信息,如果之前没有使用微信登陆过,将进行授权登录
        this.$http.get(this.$root.api+"/index/index/wx_info").then((res) => {
          if(res.data.code!=0){
              location.href='/wx/index/wxAutoLogin';
          }
        })
      }
  }
复制代码

 二、微信分享

复制代码
  methods:{
    //判断是否微信登陆
    isWeiXin() {
      let ua = window.navigator.userAgent.toLowerCase();
      console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
      } else {
      return false;
      }
    },
    //微信分享使用方法
    wxInit(sd){
      let links='http://www.kspxzx.com/index/index/wxshare_choiceOk/identity/Student/courseID/'+this.courseID+'/appointment_code/'+this.appointment_code;   //分享出去的链接
      let title='学车训练课程分享';   //分享的标题
      let desc=' 教练名字:'+this.codeName+' 所在驾校:'+this.drive+' 训练日期:'+this.date+' 训练项目:'+this.proje;  //分享的详情介绍
          wx.config({
              debug: false,
              appId: sd.appId,
              timestamp: sd.timestamp,
              nonceStr: sd.nonceStr,
              signature: sd.signature,
              jsApiList: [
                  'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo'
              ]
          });  
          wx.ready(function () {
            // alert("done")
            // alert(title)
            wx.onMenuShareTimeline({
                title: title, // 分享标题
                link:links, // 分享链接'
                imgUrl: sd.cover, // 分享图标
                success: function () {
                    // 分享纪录
                    shareRecord();
                    alert("分享到朋友圈成功")
                },
                cancel: function () {
                    alert("分享失败,您取消了分享!")
                }
            });
            // wx.onMenuShareAppMessage({
            //     title: title, // 分享标题
            //     desc: description, // 分享描述
            //     link: link, // 分享链接
            //     imgUrl: cover, // 分享图标
            //     success: function () {
            //         alert("成功分享给朋友")
            //     },
            //     cancel: function () {
            //         alert("分享失败,您取消了分享!")
            //     }
            // });

            //微信分享菜单测试
            wx.onMenuShareAppMessage({
                title:title, // 分享标题
                desc: desc, // 分享描述
                link: links, // 分享链接
                imgUrl: sd.cover, // 分享图标
                success: function () {
                    // 分享纪录
                    shareRecord();
                    alert("成功分享给朋友")
                },
                cancel: function () {
                    alert("分享失败,您取消了分享!")
                }
            });

            wx.onMenuShareQQ({
                title:title, // 分享标题
                desc: desc, // 分享描述
                link:links, // 分享链接
                imgUrl: sd.cover, // 分享图标
                success: function () {
                    // 分享纪录
                    shareRecord();
                    alert("成功分享给QQ")
                },
                cancel: function () {
                    alert("分享失败,您取消了分享!")
                }
            });
            wx.onMenuShareWeibo({
                title:title, // 分享标题
                desc: desc, // 分享描述
                link: links, // 分享链接
                imgUrl: sd.cover, // 分享图标
                success: function () {
                    // 分享纪录
                    shareRecord();
                    alert("成功分享给朋友")
                },
                cancel: function () {
                    alert("分享失败,您取消了分享!")
                }
            });
          });
          wx.error(function(res){
              // alert("error")
              // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
          });
    },
},
复制代码

 

复制代码
  mounted(){// 微信分享   'http://www.kspxzx.com/'
        let old_this=this;
        if(this.isWeiXin()){
            var url = "/Index/index/wxShare";    //后台接口
            var data = {url:'http://www.kspxzx.com/'}     //当前网页链接,必须跟当前页面链接一样,单页面则以首页链接为准
            $.post(url,data,function(res){
                if(res.code == 0){
                    // 调用微信分享
                    old_this.wxInit(res.data);
                }
            });
        }
      };


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值