QQ互联登录- 前端为 vue.js

1.设置个图标点击请求后台,后台通过相应参数生成URL返回给前台,前台在指定div打开url,用户在QQ页面登录完成后会回调到刚刚返回的URL里面的redirect_uri 中,设置个定时器1秒钟去扫一次返回的信息,扫到相应的数据进行相应的处理

登录页面
<div class="dsflogin_1"><a class="icon-qq" href="#" @click.stop.prevent="login_qq" title="QQ登录"></a></div>
//定义参数
App._$declare({ 
			ewmDiv_qq : false, 
			qq_url : '', 
			setinterval_qq : null
});
 

方法
//qq登录
			login_qq : function(){
				var _this = this; 
				if(_this.setinterval_qq != null){//有定时器先关闭
				 	clearInterval(_this.setinterval_qq);
				}
				App._$get('${ctxPath}/api/qq-login.json?_type=requestQQ&_batch=true',null,null,null,null,
					function(data){  
						_this.ewmDiv_qq = true;
						_this.qq_url = data.url;//回传url
						//监听返回参数 
						_this.setinterval_qq = setInterval(function(){ 
							if(_this.ewmDiv_qq == false){//关闭二维码窗口
								clearInterval(setinterval_qq) 
							}
							var qqStatus = $("#qqStatus",$('#ewmDiv_qq iframe')[0].contentDocument).val();//$('#ewmDiv_qq iframe')[0].contentDocument 在哪里获得
							if(qqStatus != null){ 
								clearInterval(_this.setinterval_qq) 
								if(qqStatus == 200){//成功登录
									var login_jwt = $("#login_jwt",$('#ewmDiv_qq iframe')[0].contentDocument).val();
									var login_t = $("#login_t",$('#ewmDiv_qq iframe')[0].contentDocument).val();
									window.localStorage['_authorization'] = login_jwt;
									window.localStorage['_t'] = login_t;
									setTimeout(function(){
										//登录成功,跳转到指定页面 
										window.location.href = '${ctxPath}/member/';
									},100)
								}else if(qqStatus == 201){//未注册 
									_this.ewmDiv_qq = fal
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值