SpringBoot中实现Druid前端监控界面自动登录

改进版看这里 ：SpringBoot中实现Druid前端监控界面自动登录 改进版

1、背景

最近在系统中集成Druid数据库连接池，Druid自带一个可视化监控界面，可以查看数据源、SQL执行详情、慢SQL记录等等…，但是在前端中嵌入监控界面时，还需要手动输入后台配置的账号密码，比较不方便，在研究了几个现有的方案后，都不太能较好的实现。

网上方案一：自定义HTML页面将登录请求方式改为<code>GET，在自定义的过滤器中将账号密码填入，返回307临时重定向，将携带的账号密码填入到HTML页面，请求实际的Druid登录地址，完成自动登录。

方案一缺点： 使用GET请求明文携带账号密码存在安全隐患；而且需要自定义HTML页面，如果是前后端分离的，比较麻烦。

2、实现方法

（1）项目中使用到的依赖版本

Druid版本1.2.23

<dependency>

<groupId>com.alibaba</groupId>

<artifactId>druid-spring-boot-starter</artifactId>

<version>1.2.23</version>

</dependency>

Spring Boot版本为2.7.18，此文章适用于Spring Boot为2的版本，适用于Spring Security。

（2）实现原理

本文的方法受到方案一的启发，通过请求自定义的路径，使用WebFilter过滤器，将账号密码填充到请求参数中，并转发到Druid的登录路径中，实现自动登录。

这一过程完全在后端处理，不会将任何参数转发到前端，不会产生账号密码泄露，所以在配置文件中，你可以完全使用随机字符串作为账号密码。

（3）具体代码

添加一个代理登录路径，必须允许POST方法，这里允许了全部的方法。

/**

* Druid自动登录，这里不需要处理，主要逻辑在过滤器中

*/

@RequestMapping("/loginDruid")

public void loginDruid() { }

添加自定义的过滤器

import java.io.IOException;

import java.lang.reflect.Field;

import java.util.Map;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.annotation.WebFilter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.druid.spring.boot.autoconfigure.properties.DruidStatProperties;

import lombok.extern.slf4j.Slf4j;

import org.apache.catalina.util.ParameterMap;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Component;

/**

* Druid前端自动登录过滤器

*

* @author jiusiz

* @since 2024-06-28

*/

@Component

@WebFilter(filterName = "DruidAutoLoginFilter", urlPatterns = "/loginDruid")

public class DruidAutoLoginFilter implements Filter {

@Autowired

DruidStatProperties druidStatProperties;

@Override

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {

HttpServletRequest request = (HttpServletRequest) servletRequest;

HttpServletResponse response = (HttpServletResponse) servletResponse;

// 只拦截自动登录的代理方法

if (!request.getRequestURL().toString().contains("loginDruid")) {

chain.doFilter(request, response);

return;

}

// 获取到参数，并通过反射去添加在配置文件中的Druid账号密码

Map<String, String[]> parameterMap = request.getParameterMap();

if (parameterMap instanceof org.apache.catalina.util.ParameterMap) {

try {

Field field = ParameterMap.class.getDeclaredField("locked");

field.setAccessible(true);

field.setBoolean(parameterMap, false);

parameterMap.put("loginUsername", new String[]{ druidStatProperties.getStatViewServlet().getLoginUsername()});

parameterMap.put("loginPassword", new String[]{ druidStatProperties.getStatViewServlet().getLoginPassword()});

field.setBoolean(parameterMap, true);

} catch (NoSuchFieldException | IllegalAccessException e) {

throw new RuntimeException(e);

}

// 转发到实际的Druid登录路径上

request.getRequestDispatcher("/druid/submitLogin").forward(request, response);

}

chain.doFilter(request, response);

}

}

配置文件，部分配置，请按需使用

spring:

datasource:

druid:

webStatFilter:

enabled: true

statViewServlet:

enabled: true

allow:

# 访问路径，按下面的填

url-pattern: /druid/*

# 控制台管理用户名和密码，无所谓，因为从后端取，随机字符串即可

login-username: BvcLixhs

login-password: dcqMZCWhnGZrnPhiKRYp

前端代码

仅展示Vue3的版本，其他版本一致，需要先请求代理方法后，再来到Druid首页。

<script setup>

import request from '@/utils/request'

const url = ref('')

// 必须使用POST方法，因为要转发给Druid，Druid的登录方法为POST

request.post('/loginDruid', {

// 参数无所谓，但必须要有，没有参数后端会找不到parameterMap

ignore: 1

}).then(() => {

url.value = import.meta.env.VITE_API_BASE_SERVER + '/druid/index.html'

})

</script>

<template>

<div style="width: 100%;height: 100%;">code>

<iframe

:src="url" code>

frameborder="no" code>

style="width: 100%; height: 100%" code>

scrolling="auto" />code>

</div>

</template>

3、效果展示