前后端分离使用vue、springsecurity、socketIO和AMQP协议RabbitMQ实现单点登录的自我总结的思路

我们先用画图的方式来说明这个单点登录的实现思路

 

我们根据里面的序号，结合代码一步一步来分析

 ① ②chrome浏览器和safari浏览器发送请求给springsecurity登录zhangsan账号

点击登录，直接调用submitForm函数，并且调用listOnForcecLogout( )函数，以监听 encodedToken标识

本代码在 vueclient工程里边的 login.vue文件里边

submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              axios.post("/client/customer/login",
                {
                  username: this.ruleForm.username,
                  password: this.ruleForm.password
                }
              ).then(
                response => {
                  const result = response.data;
                  console.log("返回登录token：：："+result.data.token);
                  this.$store.commit('setToken',result.data.token);
                  this.$store.commit('setUsername',this.ruleForm.username);

                  if(result.success===false){
                    this.$message.error('账号密码不正确')
                  }else{

                    axios.get("/client/customer/getCustomerIdByUsername/"+this.ruleForm.username,{
                      headers:{
                        token: result.data.token
                      }
                    }).then(
                      response => {
                        this.$message({
                          showClose: true,
                          message: '登陆成功',
                          type: 'success'
                        });
                        this.$store.commit('setCustomerId',response.data.data.customerId);
                        this.$router.replace(`/mainPage/buyService`);
                        if(this.$store.state.isLogin === false){
                          this.$store.commit('setLoginState',true);
                          this.listenOnForceLogout();
                        }
                        this.getOrderList();
                      }

                    )

                  }

                }
              );

            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }

 

listenOnForceLogout( )函数

本代码在 vueclient工程里边的 login.vue文件里边

 

③在chrome浏览器界面随意点击某项功能，只要发送了请求就行，就会自动被踢出，跳转到login页面

本代码在 vueclient工程里边的 login.vue文件里边

 

④ springsecurity发现在线用户有两个，于是强制让chrome浏览器发出/logout注销请求，这时候可以获取chrome浏览器登录时生成的token，把token利用md5加密，得到加密后的token名叫encodedToken，把encodedToken发送到消息队列

⑤ RabbitMQ接收到encodedToken这个东东

在工程目录的TokenLogoutHandler类里边

 

本代码在 后端的 homeservice 工程里边的 security_customer模块里边的 TokenLogoutHandler 类文件里边

⑥ nodeJS通过AMQP协议，把encodedToken消费掉，把消费的这个东东通过socketIO转发给vue客户端

⑦ socketIO客户端监听nodeJS服务器的socketIO的发送者，这时候，socketIO的客户端的监听标识恰好是encodedToken，只有chrome浏览器能够接收到注销请求的信息，safari则不能，因为两个客户端的encodedToken的值不一样，标识不一样

本代码在前端 vueclient工程里边的config目录里边的receiver.js 文件里边

 

⑧ socketIO接收到这个encodedToken以后，马上进行注销操作，即把本地的token清空，本地的一些信息都全部清空

chrome浏览器触发监听，调用下面的操作，执行注销操作，并且跳转到登录页面，让用户重新登录

本代码在 vueclient工程里边的 login.vue文件里边

 

项目压缩包附开发环境+项目启动教程：链接: https://pan.baidu.com/s/1x3LJwNm7XcJkABCwq2QgZw  密码: 7592