Ruoyi Vue分离版 WebSocket后端鉴权认证解决方案

WebSocket 若依鉴权

使用WebSocket实现实时通信,Ruoyi官方教程做法是在SecurityConfig中将ws的地址设为匿名访问:

("/websocket/**").permitAll()

这种方式虽然能够让WebSocket成功连接,但我想在大多数生产环境中,无需鉴权的情况极为少见。而网络上缺乏明确的Ruoyi解决方案,于是动拙笔浅析下我个人的解决方案。

WebSocket Header携带Token,修改Ruoyi鉴权拦截器

前端vue,将Token放置于创建WebSocket连接请求的protocols参数中:

 this.ws = new WebSocket(wsuri,[getToken()]);

则其请求头的Sec-Websocket-Protocol参数会替换为Token,如下图所示:

JavaScript WebSocket无法自定义Header,只有Sec-Websocket-Protocol内容能通过这种方式改变

在此基础上,我们需要让若依识别协议头Sec-Websocket-Protocol中的Token

在若依的JWT鉴权请求过滤器JwtAuthenticationTokenFilter.java中,其拦截逻辑是:

protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
        throws ServletException, IOException
{
    //从request请求中解析出LoginUser
    LoginUser loginUser = tokenService.getLoginUser(request);
    //使用这个LoginUser 完成JWT鉴权流程
    if (StringUtils.isNotNull(loginUser) && StringUtils.isNull(SecurityUtils.getAuthentication()))
    {
        tokenService.verifyToken(loginUser);
        UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(loginUser, null, loginUser.getAuthorities());
        authenticationToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
        SecurityContextHolder.getContext().setAuthentication(authenticationToken);
    }
    chain.doFilter(request, response);
}

进入这个getLoginUser函数,其内容如下:

/**
 * 获取用户身份信息
 * @return 用户信息
 */
public LoginUser getLoginUser(HttpServletRequest request)
{
    // **从request中获取携带的Token令牌**
    String token = getToken(request);
    if (StringUtils.isNotEmpty(token))
    {
        try
        {
            Claims claims = parseToken(token);
            // 解析对应的权限以及用户信息
            String uuid = (String) claims.get(Constants.LOGIN_USER_KEY);
            LoginUser user = CacheUtils.get(CacheConstants.LOGIN_TOKEN_KEY, uuid, LoginUser.class);
            return user;
        }
        catch (Exception e)
        {
        }
    }
    return null;
}

在第8行代码getToken中,进入即可看到获取Token的逻辑:

/**
 * 获取请求token
 * @param request
 * @return token
 */
private String getToken(HttpServletRequest request)
{
    String token = request.getHeader(header);
    if (StringUtils.isNotEmpty(token) && token.startsWith(Constants.TOKEN_PREFIX))
    {
        token = token.replace(Constants.TOKEN_PREFIX, "");
    }
    return token;
}

其中的header变量是ruoyi的全局参数,内容会被装载为在application.yml中定义的Token协议头(默认是Authorization

TOKEN_PREFIX为全局常量,默认为"Bearer ",标识Token开始前的前缀,我们没有前缀因此可忽略

我们的修改逻辑只是在getHeader为空时再次getHeader我们自己的协议头Sec-Websocket-Protocol, 修改后内容为:

private String getToken(HttpServletRequest request)
{
    String token = request.getHeader(header);
    if (StringUtils.isEmpty(token)){
        //如果Authorization为空,那么尝试读取Sec-Websocket-Protocol的内容
        token = request.getHeader("Sec-Websocket-Protocol");
    }else if(token.startsWith(Constants.TOKEN_PREFIX)) {
        token = token.replace(Constants.TOKEN_PREFIX, "");
    }
    return token;
}

 doFilterInternal()方法中需要同时设置响应头 Sec-Websocket-Protocol

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException {
        LoginUser loginUser = tokenService.getLoginUser(request);
        if (StringUtils.isNotNull(loginUser) && StringUtils.isNull(SecurityUtils.getAuthentication())) {
            tokenService.verifyToken(loginUser);
            UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(loginUser, null, loginUser.getAuthorities());
            authenticationToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
            SecurityContextHolder.getContext().setAuthentication(authenticationToken);
            response.setHeader("Sec-Websocket-Protocol", request.getHeader("Sec-Websocket-Protocol"));
        }
        chain.doFilter(request, response);
    }

"Sec-Websocket-Protocol"硬编码即可,无需提取为全局参数,因为WebSocket协议头名称永远无法改变

于是ruoyi便能够从WebSocket连接请求中得到Token并成功鉴权,无需配置匿名访问了。

Ruoyi WebSocketRuoyi Vue 前端框架中的一个组件,用于实现前后端的双向通信。它基于 WebSocket 技术实现,可以在前端页面和后端服务器之间建立一条持久化的连接,实现实时推送和数据更新。 Ruoyi WebSocket 的使用步骤如下: 1. 在前端页面中引入 Ruoyi WebSocket 组件; 2. 在 Vue 组件的 created 或 mounted 生命周期中创建 WebSocket 连接; 3. 在 Vue 组件的 beforeDestroy 生命周期中关闭 WebSocket 连接; 4. 在后端服务器中实现 WebSocket 的消息处理逻辑。 以下是一个简单的 Ruoyi WebSocket 使用示例: 1. 在前端页面中引入 Ruoyi WebSocket 组件: ``` <template> <div> <h1>WebSocket 示例</h1> <p>{{message}}</p> </div> </template> <script> import {websocketMixin} from '@/utils/websocket' export default { name: 'WebSocketDemo', mixins: [websocketMixin], data() { return { message: '' } }, mounted() { this.createWebSocket('/websocket/demo') // 创建 WebSocket 连接 }, beforeDestroy() { this.closeWebSocket() // 关闭 WebSocket 连接 }, methods: { onMessage(event) { this.message = event.data // 接收 WebSocket 消息 } } } </script> ``` 2. 在后端服务器中实现 WebSocket 的消息处理逻辑: ``` @Component @ServerEndpoint("/websocket/demo") public class WebSocketDemo { private static CopyOnWriteArraySet<WebSocketDemo> webSocketSet = new CopyOnWriteArraySet<WebSocketDemo>(); private Session session; @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); } @OnClose public void onClose() { webSocketSet.remove(this); } @OnMessage public void onMessage(String message) { for (WebSocketDemo webSocket : webSocketSet) { webSocket.sendMessage(message); } } private void sendMessage(String message) { try { this.session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值