使用AngularJs与后台交互实现二维码登录网站功能并实时刷新二维码

最近公司管理系统要求改成二维码登录放弃账号密码登录（又tm改需求....），下面总结一下使用AngularJs中的一些服务与后台交互来完成二维码登录功能：

1. 首先搭建界面，这里img是二维码的位置由于二维码是动态请求出来的这里src地址暂时不写：

 1 <div class="register-QR">
 2     <div class="register-cbox">
 3         <!-- 标题 -->
 4         <p class="register-logo"><i></i></p>
 5         <!-- 二维码 -->
 6         <div class="QR-logo">
 7             <p class="QR-pic"><img id="registerQRPath" alt=""></p>
 8             <p class="QR-msg">请使用手机微信扫码登录</p>
 9         </div>
10     </div>
11 </div>

2. 请求二维码，并每30秒自动更新一次二维码，这里的30秒是因为后台设置的二维码30秒后就会过期所有设置更新不需要用户在手动刷新：

 1 var QRPathId=null, QRi=0;
 2 // 二维码地址,通过id找到图片设置其src属性的地址
 3 $('#registerQRPath').attr('src',G.apiUrl_LogoIn+'createLoginCode?_='+new Date().getTime());
 4 // 每30秒更新一次二维码
 5 QRPathId = setInterval(function(){
 6     ++QRi;
 7     if(QRi%30===0){
 8         $('#registerQRPath').attr('src',G.apiUrl_LogoIn+'createLoginCode?_='+new Date().getTime());
 9     }
10 },1000);
11 // 登录成功后清除二维码更新,使用rootScope服务监控控制器是否变化如果当前控制器改变说明登录成功这是将更新清除
12 $rootScope.$on('$stateChangeStart',function(event,toState){
13     if(toState.name !== 'register'){
14         clearInterval(QRPathId);
15     }
16 });

3. 最后使用$http服务轮询请求后台服务判断用户是否扫过二维码是否登录成功，请求接口的参数值是在上面请求二维码图片是后台写进cooke的值，这里的参数值是对cookie的取值：

 1 var timerId = null;
 2 timerId = setInterval(function(){
 3     $http({
 4         url:G.apiUrl_dl+'LoginCodePC?_='+new Date().getTime(),
 5         method:'GET',
 6         params:{
 7             gui_wx:document.cookie.split("=")[1]
 8         }
 9     }).success(function(data){
10         if(data){
11             clearInterval(timerId);
12             $scope.loginActionData = data;
13             if($scope.loginActionData.token){
14                 sessionStorage.setItem("token", $scope.loginActionData.token);
15                 sessionStorage.setItem("tsname", $scope.loginActionData.name);
16                 sessionStorage.setItem("rights", $scope.loginActionData.rights);
17                 sessionStorage.setItem("userId", $scope.loginActionData.userId);
18                 sessionStorage.setItem("departmentsId", $scope.loginActionData.departmentsId);
19                 sessionStorage.setItem("departmentsName", $scope.loginActionData.departmentsName);
20                 $state.go('index');
21             }
22         }
23     });
24 },1000);

请求完图片之后就开始每隔1秒对后台进行轮询如果后台返回数据说明登录成功这时让界面跳转并停止轮询，如果后台返回数据为空说明用户没有扫描或者扫描失败这是继续轮询，登录成功后一定要记得先清除轮询。

以上就是二维码登录前端交互的方法。