spring boot+vue+websocket带token身份认证推送消息实现

要实现Spring Boot + Vue + WebSocket带Token身份认证推送消息，可以按照以下步骤进行：

1.在Spring Boot中配置WebSocket，包括WebSocket配置类、WebSocket处理器、WebSocket拦截器等。

2.在Vue中使用WebSocket连接到后端WebSocket服务，可以使用Vue-WebSocket插件来实现。

3.在后端WebSocket连接建立时，验证用户身份，可以使用JWT Token来进行身份认证。在用户登录成功后，生成JWT Token并返回给前端，前端在连接WebSocket时将JWT Token放入请求头中。

4.后端WebSocket服务在接收到WebSocket连接请求后，从请求头中获取JWT Token，并使用JWT Token验证用户身份。

5.验证通过后，将WebSocket连接信息保存到WebSocket连接池中，可以使用ConcurrentHashMap来保存WebSocket连接信息。

6.当需要向用户推送消息时，从WebSocket连接池中获取对应的WebSocket连接，并向连接中发送消息即可。

下面是一个简单的示例代码，仅供参考：

后端Spring Boot代码：

WebSocket配置类：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler(), "/ws")
                .addInterceptors(new WebSocketInterceptor())
                .setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler webSocketHandler() {
        return new MyWebSocketHandler();
    }

}

WebSocket处理器：

public class MyWebSocketHandler extends TextWebSocketHandler {

    private static final Map<Long, WebSocketSession> sessionPool = new ConcurrentHashMap<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        Long userId = getUserIdFromToken(session);
        if (userId == null) {
            session.close();
            return;
        }
        sessionPool.put(userId, session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        Long userId = getUserIdFromToken(session);
        if (userId != null) {
            sessionPool.remove(userId);
        }
    }

    private Long getUserIdFromToken(WebSocketSession session) {
        HttpHeaders headers = session.getHandshakeHeaders();
        String token = headers.getFirst("Authorization");
        if (StringUtils.isEmpty(token)) {
            return null;
        }
        try {
            Claims claims = Jwts.parser().setSigningKey("secret").parseClaimsJws(token).getBody();
            Long userId = Long.parseLong(claims.getSubject());
            return userId;
        } catch (Exception e) {
            return null;
        }
    }

    public static void sendMessage(Long userId, String message) throws IOException {
        WebSocketSession session = sessionPool.get(userId);
        if (session != null) {
            session.sendMessage(new TextMessage(message));
        }
    }

}

WebSocket拦截器：

public class WebSocketInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        HttpHeaders headers = request.getHeaders();
        String token = headers.getFirst("Authorization");
        if (StringUtils.isEmpty(token)) {
            response.setStatusCode(HttpStatus.UNAUTHORIZED);
            return false;
        }
        try {
            Claims claims = Jwts.parser().setSigningKey("secret").parseClaimsJws(token).getBody();
            Long userId = Long.parseLong(claims.getSubject());
            attributes.put("userId", userId);
            return true;
        } catch (Exception e) {
            response.setStatusCode(HttpStatus.UNAUTHORIZED);
            return false;
        }
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {

    }

}

控制器：

@RestController
public class WebSocketController {

    @GetMapping("/push")
    public void push(@RequestParam("userId") Long userId, @RequestParam("message") String message) throws IOException {
        MyWebSocketHandler.sendMessage(userId, message);
    }

}

前端Vue代码：

import Vue from 'vue'
import VueWebSocket from 'vue-websocket'

Vue.use(VueWebSocket, 'ws://localhost:8080/ws', {
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
  format: 'json',
  passToStoreHandler: function (eventName, event) {
    if (!eventName.startsWith('SOCKET_')) { return }
    let method = 'commit'
    let target = eventName.toUpperCase()
    let msg = event
    Vue.store[method](target, msg)
  }
})

// 登录成功后保存JWT Token到localStorage中
localStorage.setItem('jwtToken', 'xxxxx')

// 连接WebSocket并带上JWT Token
Vue.prototype.$socket = Vue.prototype.$connect({
  format: 'json',
  passToStoreHandler: true,
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
  queryParams: {
    Authorization: localStorage.getItem('jwtToken')
  }
})

使用时，可以调用WebSocketController的push接口向指定用户推送消息，例如：

this.$http.get('/push', { params: { userId: 123, message: 'Hello, World!' } })

注意：本示例仅供参考，实际使用时需要根据实际需求进行修改和完善。