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

叁歲伎倆 2022-11-06 07:00 161阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70][]

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

##  ① ②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文件里边 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2][]

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

## ⑤ RabbitMQ接收到encodedToken这个东东 ##

在工程目录的TokenLogoutHandler类里边

## ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3][]

### 本代码在 后端的 homeservice 工程里边的 security\_customer模块里边的 TokenLogoutHandler 类文件里边 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 5][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 7][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 8][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20221023/46676902a4114924b9c3c8b17a1e5ea3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20221023/d9de09bec47e4d828e73b681671c78d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]: /images/20221023/241d73b49a5a499f9d4862ea712ec621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]: /images/20221023/95f2fe0b6db9409c9672dcd4457d15b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4]: /images/20221023/533d1cb006ed4e06b048248efac4057f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 5]: /images/20221023/9300ea17b5b34994a78829b6441a409d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 6]: /images/20221023/b54611dafa4d4b5994e74aa0bdd48c57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 7]: /images/20221023/a846e201e39b43f1b6bccff2d3759836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 8]: /images/20221023/cb13a9979d99470a9bcbbc6a3188f683.png