1.首先使用uniapp编写一个简单可以扫码的安卓app，其中需要登录的操作与web端可以使用同一个登录接口，且在手机端登录成功后，必须将得到的token进行保存，如先使用uni.request发送登录，然后得到服务端发送来的token，进行保存，可看一下：重要的是保存 token

login() {
			
				uni.request({ 
					url: "xxx",
					method: "POST",
					data:this.loginForm,
					success: (res) => {
						console.log("登录成功！！！！！！")
						console.log(res)  //还需要保存token信息
						
						if (res.data.code === 200) {
							uni.showToast({
								title: '登录成功',
								duration: 2000
							});
							uni.setStorageSync("account", this.account)
							uni.setStorageSync("token",res.header.Authorization)
							
							uni.redirectTo({
								url: "../index/main_show"
							});
							
						} else {
							uni.showToast({
								title: '用户名或密码错误',
								icon: "loading",
								duration: 2000
							});
						}
					},

				})
			}

2. 使用 uni.scanCode 这个方法来扫描二维码，并解析到二维码中的内容，可看如下：

 uni.scanCode({
				     success: function (res) {
				         console.log('条码类型：' + res.scanType);
				         console.log('条码内容：' + res.result);  //其中蕴含网址链接
						
					    console.log("执行访问条码上的链接.....")
				        //如这个 链接 ：http://xxxx?id=xxxx
						uni.request({
							url: res.result,
							method: "POST",
							success: (res) => {
								console.log(res.data)
								console.log("执行完条码链接又得到了 Id")
                                //将得到的二维码携带的id进行保存
								uni.setStorageSync("tokenId",res.data)
								this.tokenId = uni.getStorageSync("tokenId")
							
					            //之后跳转到 确认登录页面，即确认是否登录
								uni.redirectTo({
									url: "../index/sure_login"
								});
								
							},
						
						})
						 
						 // void plus.runtime.openWeb(res.result,function(){
							//  console.log("跳转操作")
						 // });
						 
				     }
				 });

 3.在 确认登录页面执行如下操作，其实就是 发送 数据，这里就是极其重要的地方了。

       （1）发送 手机端得到的 token

         (2)  发送  从二维码解析得到的 id

          代码如下：在url里面携带了token与id，但 可以注意到 携带了 header，这里熟悉shiro认证的就可以知道，这里又将token放在header里面后，后端会自动的进行用户认证的操作，而这个操作也是必不可少的。

             //确认登录操作，发送二维码的 tokenId，与登录的token
			 sure_login(){
				 
				 uni.request({
				 	url: "xxxx/sure_userinfo?token="+this.token+"&tokenId="+this.tokenId,
				 	method: "POST",
					header:{'Authorization':this.token,
					},
				 	success: (res) => {
				 		
						console.log(res.data)
	
				 	},
				 
				 })
			   },

 4.接下来就是后端的操作了，这里先简单讲一下，这个二维码登录的流程。

   （1）首先web端，用户在未曾登录web端的情况，选择了二维码登录，而这个时候web端就从后端Fun1()方法获取了二维码，让用户选择使用自己系统的app即可上面的uniapp

   （2）而与此同时web端在出现了二维码后，便会一直定时的向后端FunctionX()方法发送请求，毕竟它不知道用户是否到底扫描了二维码

   （3）而这个时候用户 在手机端已经登录过了，手机端自然也已经保存了相关的数据如token，然后选择手机端上扫描二维码登录的按钮扫描二维码，且通过二维码上的链接发送请求到后端的方法Fun3()，然后后端Fun3()将 二维码上的 id信息 发送给 手机端，而自然的手机端也进行了保存该id信息

    (4）当完成扫码后，手机端又跳转到确认登录页面，然后用户选择 确认登录，当选择确认登录后，手机端发送请求 将 token及二维码的id都发送给后端的另一个方法Fun4()方法，在该方法中，保存二维码id、token，给后端定义的全局变量 二维码 的idTwo ,token，这里还有一个原始的 二维码id全局变量 id。

  （5）是否还记得，之前 header里面携带了 token，所以在这里自然也完成了认证，所以可以从 这里获取到用户的 id及username，当然只要有token其实也ok，看自己的需求了

  (6) 之后 全局变量 二维码idTwo与 FunctionX() 方法中的原始的 id进行比较，若一样则可以开始完成登录了，向web端发送相关的token信息，web端接收到信息，完成页面跳转，至此ok。

 5.后端方法：1.生成二维码给web端

@RequestMapping("/getqrcode")
	   public ResponseEntity<byte[]> getQRcode() throws Exception
	   {
		    System.out.println("生成二维码数据........");

	        tokenId = IdUtil.fastSimpleUUID();
	       
	        String text = "http://192.168.0.102:8080/ArchivesSystem/common-accessborrow/login_qrcode?tokenId="+tokenId;
	       
	        // 嵌入二维码的图片路径
			String imgPath = "D:/QRCode/MY-logo.png";
			// 生成的二维码的路径及名称
			String destPath = "D:/QRCode/qrc-login.jpg";
			//生成二维码
			ProduceQRCode.encode(text, imgPath, destPath, true);
	        File imgfile = new File(destPath);
	        
	        byte[] imgbyte = OpenOfficeUtil.fileToByteArray(imgfile);
	        
	        HttpHeaders headers = new HttpHeaders();
	        headers.setContentType(MediaType.IMAGE_JPEG);
	        
	        
	        ResponseEntity<byte[]> responseEntity = new ResponseEntity<byte[]>(imgbyte,headers,HttpStatus.OK);
			
	        
	        //将tokenId保存起来
	        
	        
	        
			// 解析二维码
			String str = ProduceQRCode.decode(destPath);
			// 打印出解析出的内容
			System.out.println(str);
		   
		   
		    return responseEntity;
	   }

2. 向后端不断发送请求的 FunctionX()方法，tokenIdTwo即手机端发来的哪个二维码id，而tokenId即是原始的二维码id

       @RequestMapping("/login")
	   public Result loginForQrCode(HttpServletResponse response) {
		   
		   System.out.println("我想要登录！");
		   //获取二维码 tokenId
		   System.out.println("tokenId:"  + tokenId);
		   System.out.println("tokenIdTwo:" + tokenIdTwo);
		   
		   if(tokenIdTwo == null)
		   {
			    
			    return Result.succ("nokey");
		   }
		   
		   if(tokenIdTwo.equals(tokenId))
		   {
			   System.out.println("用户已经点击了确认登录，因tokenId值一样：tokenIdTwo: " + tokenIdTwo);
			   System.out.println("tokenId: " + tokenId);
			   System.out.println("userid: " + userid);
			   System.out.println("username: " + username);
			   
			   response.setHeader("Authorization", shiroToken);
			   response.setHeader("Access-Control-Expose-Headers","Authorization");
			   //登录成功，清除token
			   tokenIdTwo = "";
			   tokenId = "";
			   
			   
			   return Result.succ(MapUtil.builder()
			    		.put("id",userid)
			    		.put("username",username)  //将账户信息返回,还可以加其他信息
			    		.put("msg","yes")
			    		.map()
			    		);
		   }
		   else {

			   
			    return Result.fail("nokey");
		   }
		 
		   
	   }
	    

3.用户扫码的方法：

      @RequestMapping("/login_qrcode")
	  public String setInfo(String tokenId) {
	
          System.out.println("用户已扫码..........");
          
    	  System.out.println("tokenId" + tokenId);
          
    	  //再将tokenId发送给手机端用户
    	  
    	  return tokenId;
	  }

4.客户端确认登录访问的方法：

      @RequestMapping("/sure_userinfo")
      public Result sure_userinfo(String tokenId,String token)
      {
    	  System.out.println("确认登录，携带tokenId与认证的jwtToken.......");
    	  
    	  System.out.println(" qrcode tokenId:" + tokenId);
    	 
    	  System.out.println("shiro token: " + token );
    	  
//若不需要userid，username可不写 userprofile
          UserProfile userpro = (UserProfile) SecurityUtils.getSubject().getPrincipal();
    	  
    	  tokenIdTwo = tokenId;  
    	  shiroToken = token;    //登录的token
          
    	  
    	  //将用户信息保存
    	  userid = userpro.getUserId();
    	  username = userpro.getUsername();
    	  
    	  
    	   return Result.succ("ok");

    	 
      }

_________________________________________________________

最后演示成果：

1.

2.

之后就ok了。

其中使用的web端 使用到的 轮番访问的方法如下：

       //进入这个页面就开始登录的请求
         getLoopLogin(timeout = 15000){
             this.polling = window.setInterval(() => {
                  setTimeout(this.qr_login(), 0);
              }, 3500);
         },
          //获取二维码信息，每次点开就获取一次即可
          getQRcode(){
        
           this.$axios({
                
                method:'GET',
                url:this.dbURL+'/common-accessborrow/getqrcode',
                 //responseType: 'arraybuffer'
                responseType: 'blob'
                }).then(res=>{

                     console.log(res)
                     let a = document.createElement('a');
                     let blob = new Blob([res.data],{
                      //type:'application/pdf'   //也是必不可少的
                       type:res.data.type
                      }); 
                     let objectUrl = window.URL.createObjectURL(blob);
                     this.codeImg = objectUrl
                     console.log(this.codeImg)

                 });

          },
          //请求登录，看看是否登录
          qr_login(){
              console.log("请求第 ：" + this.num + "次登录...");
              this.num++;
            const _this = this

             this.$axios.post(this.dbURL+'/common-accessborrow/login').then(res=>{
                
                console.log(res)
                if(res.data.data == "nokey")
                {
                      //Element.Message.warning("nokey！",{duration : 3*1000});
                      //this.$router.push("/qrcode_login");
                }
                else if(res.data.data.msg == "yes")
                {
                   Element.Message.success("成功登录！",{duration : 3*1000});
                   const jwt = res.headers['authorization']
                   const userInfo = res.data.data
			       _this.$store.commit("SET_TOKEN",jwt);  //保存token信息
				   _this.$store.commit("SET_USERINFO",userInfo)
                   const isexcute = 0  //0表示第一次执行
                  _this.$store.commit("SET_ISGETMENU",isexcute);

                   this.$router.push("/")
                }

				
		   })


          },   
                  
    },
   created(){  //轮番访问

        //    window.setInterval(() => {
        //           setTimeout(this.qr_login(), 0);
        //       }, 5000);
        this.getQRcode();

        this.getLoopLogin();

    },
    beforeRouteLeave(to,from,next){
         next();
         console.log("终止轮询！")
         if(this.polling){
             clearInterval(this.polling);
             this.polling = null;
         }
         
    },

--------------------------------

补充一个时序图：

无状态HTTP协议

协议就是两个计算机之间通讯需要遵守的规则，而HTTP协议是无状态的协议，当用户完成一次数据交互之后就会断开客户端和服务器之间的连接，无法进行数据跟踪。
用大白话来解释就是，比如说用户在网上把一个商品添加到购物车内，这就是一次数据交互，然后对话就会关闭，关闭之后你想第二次把商品添加到购物车内，服务器就找不到你应该添加到那个购物车内部了。这显然不是我们所需要的

session和cookie

cookie（存放在客户的浏览器上）

首先明确一点：cookie是由服务器颁发保存在客户端浏览器上的，下一次请求时浏览器会把cookie和请求的网址同时发送给服务器

大白话解释就是：cookie是一把钥匙，服务器是个锁头，这把要是也是服务器交到客户端手里的，只有一下次需要的时候拿着这把钥匙过来开锁，我才能把数据给你

cookie的主要内容包括：用户id、密码，过期时间，路径和域
Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

session （存放在服务器端）

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。其实，在用户和服务器第一次建立连接的时候，服务器就会自动生成一个sessionID保存在服务器中。
在cookie中提到过，cookie是由服务器颁发的，在颁发cookie中的过程中会把sessionID也颁发过去，事实上这个sessionID才是那把打开服务器的钥匙。浏览器在发起请求的时候会自动的把sessionID放在HTTP请求头中

• session的创建
  当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了sessionId，如果已包含则说明以前已经为此客户端创建过session，服务器就按照sessionId把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含sessionId，则为此客户端创建一个session并且生成一个与此session相关联的sessionId，sessionId的值是一个既不会重复，又不容易被找到规律以仿造的字符串，这个sessionId将被在本次响应中返回给客户端保存。
  

session和cookie的区别

session和cookie的区别：

1. seesion保存在浏览器上，cookie保存在本地上
2. 存储时间不同，cookie存储的时间比较长，session存储时间较短随着客户端关闭就消失了，
3. 安全性不同，cookie是把账号密码存储在本地中，session是把信息存储在浏览器中，安全性session要远高于cookie
4. 存储的大小不同，单个cookie文件最大不超过4K，session要远超过cookie

token

首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；token就是用户信息的钥匙，由后端服务器返回

登录过程

现如今登录过程一般可以分为两种，一种是通过token验证，另一种是通过session和cookie进行验证，现如今在前后端分离开发的过程中，基本都是使用token验证。在跨域的时候一般选择用token验证，不跨域的时候选择用session和cookie验证
本文将详细接受token验证

token验证

客户端在登录页面属于用户名和密码进行登录发送给服务器，服务器验证通过之后会生成针对于改用户的唯一的token值，客户端需要存储这个token值，（这个token值是代表了用户的登录状态），以后客户端每一次的请求都要携带该token，客户端验证该token是否存在。因为token只应该在当前网站打开的时候生效，所以应该将sessionStroage中存储。思路大题如下

1. 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给客户端浏览器；
2. 前端拿到后端返回的 token ,存储在 localStorage 里；
3. 前端每次路由跳转，判断 localStorage有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态；
4. 每次请求接口，在 Axios 请求头里携带 token;
5. 后端接口判断请求头有无 token，没有或者 token 过期，返回401；
6. 前端得到 401 状态码，重定向到登录页面。

//axios封装等这里就不在赘述，主要写上关键代码，res.data是从后端请求过来的数据
//把token值保存在sessionStorage中
window.sessionStorage.setItem("token",res.data.token);
//axios请求拦截器，在请求数据的时候把token放在请求头中
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

扫码登录：

我们经常用的一些app，如qq和淘宝，天猫等这一类的软件。而开发这些app的企业，都有他们相对应的网站。为了让用户在使用他们的网站时，登录更加方便和安全。企业提供了， 使用手机，扫一扫，就可以登录的服务。网页登录时的效果如下：

原理解释

网页端+服务器

接下来就是对于这个服务的详细实现。首先，大概说一下原理：用户打开网站的登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id作为key值存入redis服务器，同时设置一个过期时间，再过期后，用户登录二维码需要进行刷新重新获取。同时，将这个key值和本公司的验证字符串合在一起，通过二维码生成接口，生成一个二维码的图片（二维码生成，Zxing二维码生成java）然后，将二维码图片和uuid一起返回给用户浏览器。

浏览器拿到二维码和uuid后，会每隔一秒向浏览器发送一次，登录是否成功的请求。请求中携带有uuid作为当前页面的标识符。这里有的同学就会奇怪了，服务器只存了个uuid在redis中作为key值，怎么会有用户的id信息呢？ 

这里确实会有用户的id信息，这个id信息是由手机服务器存入redis中的。具体操作如下：

手机端+服务器

话说，浏览器拿到二维码后，将二维码展示到网页上，并给用户一个提示：请掏出您的手机，打开扫一扫进行登录。用户拿出手机扫描二维码，就可以得到一个验证信息和一个uuid（扫描二维码获取字符串的功能Zxing二维码，这里就不详细介绍了）。由于手机端已经进行过了登录，在访问手机端的服务器的时候，参数中都回携带一个用户的token，手机端服务器可以从中解析到用户的userId（这里从token中取值而不是手机端直接传userid是为了安全，直接传userid可能会被截获和修改，token是加密的，被修改的风险会小很多）。手机端将解析到的数据和用户token一起作为参数，向服务器发送验证登录请求（这里的服务器是手机服务器，手机端的服务器跟网页端服务器不是同一台服务器）。服务器收到请求后，首先对比参数中的验证信息，确定是否为用户登录请求接口。如果是，返回一个确认信息给手机端。

手机端收到返回后，将登录确认框显示给用户（防止用户误操作，同时使登录更加人性化）。用户确认是进行的登录操作后，手机再次发送请求。服务器拿到uuId和userId后，将用户的userid作为value值存入redis中以uuid作为key的键值对中。

登录成功

然后，浏览器再次发送请求的时候，浏览器端的服务器就可以得到一个用户Id，并调用登录的方法，声成一个浏览器端的token，再浏览器再次发送请求的时候，将用户信息返回给浏览器，登录成功。这里存储用户id而不是直接存储用户信息是因为，手机端的用户信息，不一定是和浏览器端的用户信息完全一致。

有问题欢迎留言~