![image-20240408100632322](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/faa0c475c4c05443843d740aa7af871f.png)

后端使用cookie记录登录信息时，登录完成后响应头会携带Set-Cookie属性，浏览器会识别Set-Cookie并在满足一些条件后将Cookie注入浏览器中。

这里的请求它如果是跨域（前端域名和后端域名不一致）的，那么Cookie将无法注入。

## 1 前端设置

跨域请求的情况下，浏览器默认禁止携带cookie，如果想携带cookie，需要在请求时设置`withCredentials`参数为`true`，fetch请求的设置方法为`method.config.credentials = 'include'`

当请求的`credentials`模式为`include`时，响应头`Access-Control-Origin`的值不可以是`*`，也就是说服务端的cors插件的origin参数，必须指定具体域名，而不能是`*`这种通配符

在这个设置后的Cookie注入情况

![8559f98dc9ab4d7dc5e3a969cb213de0](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/8559f98dc9ab4d7dc5e3a969cb213de0.jpg)

## 2 后端设置

前端设置完毕后，将开始设置后端，后端主要设置`SameSite`

`SameSite`允许我们声明 cookie 可以用来 first-party 或者 same-site。它会明确的给出“网站”是指哪些（哪些可以带 cookie）。网站由域名后缀和域名前部分组成，比如`www.web.dev`是`web.dev`的一部分。

`SameSite`属性提供了三种不同的方式来管理 cookie，你可以不指定这个属性（`None`），或者使用`Strict`和`Lax`来限制 cookie 的 same-site 请求。

**Strict**

`Strict`最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。

这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。

**Lax**

`Lax`规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。详见下表。

| 请求类型  |                 示例                 |    正常情况 | Lax         |
| :-------- | :----------------------------------: | ----------: | :---------- |
| 链接      |         `<a href="..."></a>`         | 发送 Cookie | 发送 Cookie |
| 预加载    | `<link rel="prerender" href="..."/>` | 发送 Cookie | 发送 Cookie |
| GET 表单  |  `<form method="GET" action="...">`  | 发送 Cookie | 发送 Cookie |
| POST 表单 | `<form method="POST" action="...">`  | 发送 Cookie | 不发送      |
| iframe    |    `<iframe src="..."></iframe>`     | 发送 Cookie | 不发送      |
| AJAX      |            `$.get("...")`            | 发送 Cookie | 不发送      |
| Image     |          `<img src="...">`           | 发送 Cookie | 不发送      |

设置了`Strict`或`Lax`以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。

**None**

这种情况下允许在 third-party 发送请求时使用 cookie

但是设置`SameSite`为`None`时需要同时设置`Secure`，Cookie 只能通过 HTTPS 协议发送），否则无效。

```bash
Set-Cookie: widget_session=abc123; SameSite=None; Secure
```



在我们的后端并没有设置HTTPS协议，故通过设置SameSite的方式完全无效了，我们选择通过代理的方式设置。

这块设置完后的Cookie注入情况

![ea565c6f5879015f8b07c432d14101e3](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/ea565c6f5879015f8b07c432d14101e3.jpg)

## 3 代理设置

在生产环境中，我们可以通过设置前端的Nginx代理服务器，设置后端服务反向代理到前端的域名上(或者前端反向代理到后端服务器上也是一样的)这样就从根源上解决了跨域问题。

Nginx配置如下

```nginx
# 代替vite 中的代理服务 功能 反向代理后端域名到 前端
location /api {
    proxy_pass http://xx.xx.xx.xx:xx;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
```

这个时候，请求前端域名`http://localhost:5173/api`就相当于请求后端域名的`http://xx.xx.xx.xx:xx/api`，注意Nginx是没有重写功能的，故必须配置后端的请求路径

```yaml
servlet:
    context-path: /api
```

这个时候就可以正常的注入Cookie了

开发环境中的前端配置，需要通过 Vite 的代理服务器实现，具体配置如下，基本都会的

```js
server: {  
  // 指定dev sever的端口号，默认为5173  
  port: env.VITE_APP_PORT,  
  // 自动打开浏览器运行以下页面  
  // open: '/',  
  // 设置反向代理  
  proxy: {  
    // 以下示例表示：请求URL中含有"/api"，则反向代理到http://localhost  
    // 例如: http://localhost:3000/api/login -> http://localhost/api/login  
    // 如果反向代理到localhost报错Error: connect ECONNREFUSED ::1:80，  
    // 则将localhost改127.0.0.1  
    '/api': {  
      target: env.VITE_API_URL,  
      changeOrigin: true,  
      // rewrite: (path) => path.replace(/^\/api/, ''),  
    },  
  },  
},
```

记录一次跨域Cookie携带问题 SameSite Secure和前后端设置 包括Nginx反向代理和Vite的前端设置

通常我们会选择使用`msi`可执行文件的安装方式，但是容易在之后出现各种问题，于是我们使用压缩文件的方式安装

在此之前，请确定上一次安装的MySQL已经完全卸载了，查看方式，看MySQL的安装路径是否还存在，看ProgramData目录下是否存在MySQL的文件夹，查看服务是否删除，这里只讲如何删除服务

1. mysql服务，正常安装的服务名应该是MySQL80

![image-20240315214244770](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/a471ad5aeb743b3a035faea781eda41d.png)

2. 打开注册表项`计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services`，删除关于MySQl80的项

![image-20240315214440875](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/4b36502854f91a52b2d93351b5261587.png)

2. 或者使用`sc delete MySQL80`删除服务



1. 首先在官网选择`zip`可执行程序

![image-20240315212101283](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/773c48f0bdd912fdef1936fc01de407c.png)

2. 解压到 `C:/Program Files/MySQL` 下
3. 创建`my.ini`文件，内容如下

```ini
[mysqld]
# 设置3306端口
port=3306
# 设置mysql的安装目录 ---这里输入你安装的文件路径----
basedir=C:\Program Files\MySQL
# 设置mysql数据库的数据的存放目录
datadir=C:\Program Files\MySQL\data
# 允许最大连接数
max_connections=200
# 允许连接失败的次数。
max_connect_errors=10
# 服务端使用的字符集默认为utf8
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
# 默认使用“caching_sha2_password”插件认证
#caching_sha2_password
default_authentication_plugin=caching_sha2_password
[mysql]
# 设置mysql客户端默认字符集
default-character-set=utf8
[client]
# 设置mysql客户端连接服务端时默认使用的端口
port=3306
default-character-set=utf8
```

4. 进入MySQL的bin目录，执行命令

```bash
//安装mysql  安装完成后Mysql会有一个随机密码
./mysqld.exe --initialize --console
```

![image-20240315212322113](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/ebc07057fb46c8d4bce3cf9a81a88601.png)

5. 安装MySQL服务

```bash
//安装mysql服务并启动   
./mysqld.exe --install MySQL80
```

6. 添加环境变量

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/9d9bc10b5196639743726f19f836d6aa.png)

7. 使用命令登录MySQL，输入刚才的密码

```bash
mysql -uroot -p
```

8. 修改密码

```sql
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';
```

9. 此时MySQl已经安装完毕了

![image-20240315215056345](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/603e56279f57158afb0143b1860877d1.png)

Windows下使用压缩包安装MySQL的方法

总所周知，Windows默认的终端非常难看且不好用，本文介绍使用Windows Terminal+nerd-fonts+Oh my posh+PSReadLine 实现终端的美化字体样式和自动补全。

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/aa3de8f6bda0d052061d6b9f73e92163.png)

## 1. 安装Chocolatey

在[Chocolatey Software | Installing Chocolatey](https://chocolatey.org/install)网页下，复制安装脚本

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/135dba74fade69aaada79a0025f5312e.png)

安装脚本

```shell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
```

复制到终端中

即可自动安装`Chocolatey`

## 2. 安装字体

推荐使用等宽连体带图标(终端显示的花样多一点)的字体

我使用[Nerd Fonts](https://www.nerdfonts.com/)

安装使用`Chocolatey`即可

```bash
choco install nerd-fonts-hack
```



## 3. 编辑windows terminal 配置使用Nerd Fonts字体

这里很多人都会去下载一个powershell，其实没有必要，Windows自带的powershell的版本和功能已经可以满足要求。

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/e0547c1027f29d4dc2590790efab2f4c.png)

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/ebeaabf0f74eb37d41173f7f4bfbbc47.png)

当然也可以直接使用配置文件，`"defaults"`在`"profiles"`属性下

```json
"defaults": 
{
    "backgroundImage": null,
    "colorScheme": "Campbell",
    "cursorShape": "filledBox",
    "experimental.retroTerminalEffect": false,
    "font": 
    {
        "face": "CodeNewRoman Nerd Font Mono",
        "size": 14.0,
        "weight": "normal"
    },
    "opacity": 90,
    "padding": "0",
    "scrollbarState": "hidden",
    "useAcrylic": false
},
```

其余的配置文件内容

```json
"copyFormatting": "none",
"copyOnSelect": false,
"defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
"alwaysOnTop": false,
"alwaysShowTabs": true,
"autoHideWindow": false,
"disableAnimations": false,
"firstWindowPreference": "defaultProfile",
"focusFollowMouse": false,
"initialCols": 88,
"initialPosition": "750,350",
"initialRows": 24,
"launchMode": "focus",
```

大概在这个行数

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/075e892a965f8d16d6aae7516bf7a769.png)

添加快捷键

```json
"actions": 
[
    {
        "command": 
        {
            "action": "copy",
            "singleLine": false
        },
        "keys": "ctrl+c"
    },
    {
        "command": "paste",
        "keys": "ctrl+v"
    },
    {
        "command": 
        {
            "action": "splitPane",
            "split": "auto",
            "splitMode": "duplicate"
        },
        "keys": "alt+shift+d"
    },
    {
        "command": "find",
        "keys": "ctrl+shift+f"
    },
    {
        "command": "toggleFocusMode",
        "keys": "alt+z"
    }
],
```

这样可以使用`alt+z`打开标题栏

## 4. 设置管理员权限启动

没有这个选项的更新即可

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/cebec2ec3649bda0fb0350cdf9c7b2e1.png)



## 5. 使用oh-my-posh

1. 安装，还是使用`Chocolatey`

```bash
choco install oh-my-posh
```

2. 创建`powershell`配置文件

```bash
if (!(Test-Path -Path $PROFILE )) { New-Item -Type File -Path $PROFILE -Force }
```

3. 打开配置文件

```bash
notepad $PROFILE
```

4. 写入指令，这里是让终端在启动时加载`oh-my-posh`配置文件，其中`~/.omp.theme.json`是配置文件的所在路径，windows的话就是在`C:\Users\Administrator`下创建`.omp.theme.json`文件并写入配置即可

```bash
oh-my-posh init pwsh --config ~/.omp.theme.json | Invoke-Expression
```

5. 使用`kushal`主题，其他主题在这里选择[Themes | Oh My Posh](https://ohmyposh.dev/docs/themes)

6. 复制内容粘贴到配置文件中即可

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/ec786192c578bf9e93fc91282ecc58e3.png)

7. 关闭启动时的banner，添加`-nologo`项即可

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/3714b3074d1258af263f5a066f6e03c5.png)



## 6.终端禁止运行脚本解决方案

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/77680a9388ce0afedeffe5407637f452.png)

输入这个命令即可

```bash
set-ExecutionPolicy RemoteSigned
```

## 7. 使用自动补全

1. 先安装最新的`PowerShellGet`

```bash
Install-Module -Name PowerShellGet -Force
Exit
```

2. 再安装`PSReadLine`

```bash
Install-Module PSReadLine -AllowPrerelease -Force
```

3. 在`powsershell`输入

```bash
notepad.exe $PROFILE
```

4. 在打开的界面输入下面内容

```bash
Set-PSReadLineKeyHandler -Key Tab -Function MenuComplete #Tab键会出现自动补全菜单
Set-PSReadlineKeyHandler -Key UpArrow -Function HistorySearchBackward
Set-PSReadlineKeyHandler -Key DownArrow -Function HistorySearchForward
# 上下方向键箭头，搜索历史中进行自动补全
```

5. 保存重启`powershell`即可

Windows终端美化

在后端服务的开发中验证码的校验是不可或缺的部分

通常我们把验证码校验写成这样

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/f338a3079471b2c2b737614756e2543d.png)

从redis取出验证码的值，然后和前端传入的值进行比较，验证码校验无误后进行后续操作

我们发现，需要验证码的功能，**校验都是先于业务逻辑的**，因此我们可以定义注解+AOP在方法执行前完成验证码的校验。

### 1. Java中的注解

注解（`Annotation`）是Java SE 5.0 版本开始引入的概念，它是对 Java 源代码的说明，是一种元数据（描述数据的数据）。

- 注解的定义通过 `@interface` 表示，所有的注解会自动继承 `java.lang.Annotation` 接口，且不能再继承别的类或是接口。
- 注解的成员参数只能用 `public` 或默认 (`default`) 访问权修饰来进行修饰。
- 成员参数只能使用 8 种基本类型（byte、short、char、int、long、float、double、boolean）和 String、Enum、Class、annotations等数据类型，及其数组。
- 获取类方法和字段的注解信息，只能通过 Java 的反射技术来获取 Annotation 对象。
- 注解可以没有定义成员，只做标识。



### 2. 注解的分类

按照来源划分，注解可以分为 3 类

1. JDK的注解
2. 第三方的注解
3. 自定义注解



### 3. JDK注解

JAVA内置注解在 `java.lang` 中，4个元注解在 `java.lang.annotation` 中。

**JAVA内置注解**

- @Override （标记重写方法）
- @Deprecated （标记过时）
- @SuppressWarnings （忽略警告）

**元注解 (注解的注解)**

- @Target （注解的作用目标）
- @Retention （注解的生命周期）
- @Document （注解是否被包含在JavaDoc中）
- @Inherited （是否允许子类继承该注解）

**@Target**

`@Target` 注解表明该注解可以应用的JAVA元素类型。

| Target类型                  | 描述                                                         |
| --------------------------- | ------------------------------------------------------------ |
| ElementType.TYPE            | 应用于类、接口（包括注解类型）、枚举                         |
| ElementType.FIELD           | 应用于属性（包括枚举中的常量）                               |
| ElementType.METHOD          | 应用于方法                                                   |
| ElementType.PARAMETER       | 应用于方法的形参                                             |
| ElementType.CONSTRUCTOR     | 应用于构造函数                                               |
| ElementType.LOCAL_VARIABLE  | 应用于局部变量                                               |
| ElementType.ANNOTATION_TYPE | 应用于注解类型                                               |
| ElementType.PACKAGE         | 应用于包                                                     |
| ElementType.TYPE_PARAMETER  | 1.8版本新增，应用于类型变量                                  |
| ElementType.TYPE_USE        | 1.8版本新增，应用于任何使用类型的语句中（例如声明语句、泛型和强制转换语句中的类型） |

**@Retention**

`@Retention`  表明该注解的生命周期。

| 生命周期类型            | 描述                                                         |
| ----------------------- | ------------------------------------------------------------ |
| RetentionPolicy.SOURCE  | 编译时被丢弃，不包含在类文件中                               |
| RetentionPolicy.CLASS   | JVM加载时被丢弃，包含在类文件中，默认值                      |
| RetentionPolicy.RUNTIME | 始终不会丢弃，可以使用反射获得该注解的信息。由JVM 加载，包含在类文件中，在运行时可以被获取到。自定义的注解最常用的使用方式。 |

**@Document**

表明该注解标记的元素可以被Javadoc 或类似的工具文档化

**@Inherited**

表明使用了@Inherited注解的注解，所标记的类的子类也会拥有这个注解。



### 4. 注解的语法

```java
/**
 * 修饰符 @interface 注解名 {
 * 注解元素的声明1
 * 注解元素的声明2
 * }
 */
```

 - 修饰符：访问修饰符必须为public,不写默认为pubic；
 - 关键字：必须为@interface；
 - 注解名： 注解名称为自定义注解的名称，使用时还会用到；
 - 注解类型元素：注解类型元素是注解中内容，可以理解成自定义接口的实现部分；

```java
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface MyTestAnnotation {
    /**
     *    注解的元素声明的两种形式
     *    type elementName();
     *    type elementName() default value;  
     */
    String value() default "test";
}
```



### 5. 反射

什么是反射?

- 反射允许对封装类的字段，方法和构造函数的信息进行编程访问。

例如IDEA的代码提示功能，利用了反射获取类的信息

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/174efdd670e1b525cf83264f81448f41.png)

反射获取信息和使用

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/829722463ce9bda3ad9a1da8029dc2ed.png)



### 6. 使用反射获取成员变量

**Class类中用于获取成员变量的方法**

| 方法名                                | 说明                           |
| ------------------------------------- | ------------------------------ |
| `Field [] getFields()`                | 返回所有公共成员变量对象的数组 |
| `Field[] getDeclaredFields()`         | 返回所有成员变量对象的数组     |
| `Field getField(String name)`         | 返回单个公共成员变量对象       |
| `Field getDeclaredField(String name)` | 返回单个成员变量对象           |

### 7. Spring AOP

#### 7.1 什么是AOP

AOP是Aspect Oriented Programming的缩写，意思是：面向切面编程，它是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。



#### 7.2 AOP中的概念

##### 7.2.1 通知(Advice)

在AOP术语中，切面要完成的工作被称为通知，通知定义了切面是什么以及何时使用。

Spring切面有5种类型的通知，分别是：

- 前置通知(Before)：在目标方法被调用之前调用通知功能
- 后置通知(After)：在目标方法完成之后调用通知，此时不关心方法的输出结果是什么
- 返回通知(After-returning)：在目标方法成功执行之后调用通知
- 异常通知(After-throwing)：在目标方法抛出异常后调用通知
- 环绕通知(Around)：通知包裹了被通知的方法，在被通知的方法调用之前和调用之后执行自定义的行为



##### 7.2.2 连接点(Join point)

连接点是在应用执行过程中能够插入切面的一个点，这个点可以是调用方法时、抛出异常时、修改某个字段时。



##### 7.2.3 切点(Pointcut)

切点是为了缩小切面所通知的连接点的范围，即切面在何处执行。我们通常使用明确的类和方法名称，或者利用正则表达式定义所匹配的类和方法名称来指定切点。



##### 7.2.4 切面(Aspect)

切面是通知和切点的结合。通知和切点共同定义了切面的全部内容：它是什么，在何时和何处完成其功能。



##### 7.2.5 引入(Introduction)

引入允许我们在不修改现有类的基础上，向现有类添加新方法或属性。



##### 7.2.6 织入(Weaving)

织入是把切面应用到目标对象并创建新的代理对象的过程。

切面在指定的连接点被织入到目标对象中，在目标对象的生命周期里，有以下几个点可以进行织入：

- 编译期：切面在目标类编译时被织入。这种方式需要特殊的编译器。AspectJ的织入编译器就是以这种方式织入切面的。
- 类加载期：切面在目标类加载到JVM时被织入。这种方式需要特殊的类加载器(ClassLoader)，它可以在目标类被引入应用之前增强该目标类的字节码。
- 运行期：切面在应用运行的某个时刻被织入。一般情况下，在织入切面时，AOP容器会为目标对象动态地创建一个代理对象。Spring AOP就是以这种方式织入切面的。



### 8. 开始动工

前面介绍了Java中的注解、AOP和反射，我们通过这三个个东西获取方法的参数并在方法之前执行验证码验证的操作

首先我们需要引入spring-aop

```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
    <version>${spring-boot.version}</version>
</dependency>
```

创建`VerifyCCaptha`注解

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/acda0c15043f62c377ebf0eadda56fb2.png)

```java
/**
 * 验证码校验注解
 *
 * @author pepedd864
 * @since 2023/12/5
 */
@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.METHOD)
public @interface VerifyCaptcha {
  String code() default "0"; // 验证码 默认为第一个参数

  String uuid() default "1"; // 验证码uuid 默认为第二个参数
}
```



创建切面

```java
/**
 * 验证码验证切面
 *
 * @author pepedd864
 * @since 2023/12/5
 */
@Aspect
@Component
@Slf4j
public class VerifyCaptchaAop {
  @Autowired
  private RedisCache redisCache;


  /**
   * 校验验证码
   *
   * @param joinPoint     切点
   * @param verifyCaptcha 注解
   */
  @Before("@annotation(verifyCaptcha)")
  public void verifyCaptcha(JoinPoint joinPoint, VerifyCaptcha verifyCaptcha) {
    log.info("校验验证码...");
     // TODO 校验流程
  }
}
```

我们希望在方法上使用可以自动获取参数并校验验证码，就像这样

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/d58435ec3a33facd85293da3480d32cd.png)

而Java程序在运行时无法获取方法参数名，注解中也无法获取方法的参数。因此，我想到**使用数字获取方法中的第n个参数，并使用反射获取参数的值(其实可以使用JSON序列化反序列获取参数)**

于是code和uuid就变成了这样`0$code`、`0$uuid`

在aop中先分割注解中的参数，并转为数字

```java
// 分割参数 0$code.n1.n2  0$uuid.n1.n2 为 0 code.n1.n2; 0 uuid.n1.n2 两个部分
String[] split1 = verifyCaptcha.code().split("\\$");
String[] split2 = verifyCaptcha.uuid().split("\\$");

int n1 = Integer.parseInt(split1[0]);
int n2 = Integer.parseInt(split2[0]);
```

在方法中，我们可能只传入数字`0`、`1`等，于是我们也需要做出判断

```java
// 一级参数时
if (split1.length == 1) {
  // ...
}
if (split2.length == 1) {
  // ...
}
// 二级参数时
if (split1.length != 1 && split2.length != 1) {
    // ...
}
```

为了进行后续操作，我们先定义获取对象属性值的方法，它需要传入一个对象`obj`和属性的路径`n1.n2.n3`

```java
/**
 * 通过反射获取对象属性值
 *
 * @param obj             对象
 * @param propertyNameStr 属性名，支持多级，如：user.name
 * @return 属性值
 * @throws Exception 异常
 */
public Object getProperty(Object obj, String propertyNameStr) throws Exception {
  String[] propertyNames = propertyNameStr.split("\\.");

  Object propertyValue = obj;

  for (String propertyName : propertyNames) {
    Field field = propertyValue.getClass().getDeclaredField(propertyName);
    field.setAccessible(true);
    propertyValue = field.get(propertyValue);
  }

  return propertyValue;
}
```



所以获取参数的操作就变成了这样

```java
// 通过 args1[0] 中的数字n 获取第n个参数
Object[] args = joinPoint.getArgs();
String code = "";
String uuid = "";

try {
  // 一级参数时
  if (split1.length == 1) {
    code = args[n1].toString();
  }
  if (split2.length == 1) {
    uuid = args[n2].toString();
  }
  // 二级参数时
  if (split1.length != 1 && split2.length != 1) {
    if (args.length > n1) {
      code = getProperty(args[n1], split1[1]).toString();
    }
    if (args.length > n2) {
      uuid = getProperty(args[n2], split2[1]).toString();
    }
  }
} catch (Exception e) {
  throw new RuntimeException("验证码参数错误");
}

log.info("code: {}", code);
log.info("uuid: {}", uuid);
```



校验验证码使用之前的逻辑即可

```java
// 校验验证码
String captchaCode = redisCache.getCacheObject(CacheConstants.CAPTCHA_CODE_KEY + uuid);
if (captchaCode == null) {
  throw new RuntimeException("验证码已过期");
}
if (!code.equalsIgnoreCase(captchaCode)) {
  throw new RuntimeException("验证码错误");
}
redisCache.deleteObject(CacheConstants.CAPTCHA_CODE_KEY + uuid);
```



完整代码如下

```java
package cn.pepedd.aop;

import cn.pepedd.annotation.VerifyCaptcha;
import cn.pepedd.constants.CacheConstants;
import cn.pepedd.redis.RedisCache;
import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.lang.reflect.Field;

/**
 * 验证码验证切面
 *
 * @author pepedd864
 * @since 2023/12/5
 */
@Aspect
@Component
@Slf4j
public class VerifyCaptchaAop {
  @Autowired
  private RedisCache redisCache;


  /**
   * 校验验证码
   *
   * @param joinPoint     切点
   * @param verifyCaptcha 注解
   */
  @Before("@annotation(verifyCaptcha)")
  public void verifyCaptcha(JoinPoint joinPoint, VerifyCaptcha verifyCaptcha) {
    log.info("校验验证码...");

    // 分割参数 0$code.n1.n2  0$uuid.n1.n2 为 0 code.n1.n2; 0 uuid.n1.n2 两个部分
    String[] split1 = verifyCaptcha.code().split("\\$");
    String[] split2 = verifyCaptcha.uuid().split("\\$");

    int n1 = Integer.parseInt(split1[0]);
    int n2 = Integer.parseInt(split2[0]);

    // 通过 args1[0] 中的数字n 获取第n个参数
    Object[] args = joinPoint.getArgs();
    String code = "";
    String uuid = "";

    try {
      // 一级参数时
      if (split1.length == 1) {
        code = args[n1].toString();
      }
      if (split2.length == 1) {
        uuid = args[n2].toString();
      }
      // 二级参数时
      if (split1.length != 1 && split2.length != 1) {
        if (args.length > n1) {
          code = getProperty(args[n1], split1[1]).toString();
        }
        if (args.length > n2) {
          uuid = getProperty(args[n2], split2[1]).toString();
        }
      }
    } catch (Exception e) {
      throw new RuntimeException("验证码参数错误");
    }

    log.info("code: {}", code);
    log.info("uuid: {}", uuid);

    // 校验验证码
    String captchaCode = redisCache.getCacheObject(CacheConstants.CAPTCHA_CODE_KEY + uuid);
    if (captchaCode == null) {
      throw new RuntimeException("验证码已过期");
    }
    if (!code.equalsIgnoreCase(captchaCode)) {
      throw new RuntimeException("验证码错误");
    }
    redisCache.deleteObject(CacheConstants.CAPTCHA_CODE_KEY + uuid);
  }

  /**
   * 通过反射获取对象属性值
   *
   * @param obj             对象
   * @param propertyNameStr 属性名，支持多级，如：user.name
   * @return 属性值
   * @throws Exception 异常
   */
  public Object getProperty(Object obj, String propertyNameStr) throws Exception {
    String[] propertyNames = propertyNameStr.split("\\.");

    Object propertyValue = obj;

    for (String propertyName : propertyNames) {
      Field field = propertyValue.getClass().getDeclaredField(propertyName);
      field.setAccessible(true);
      propertyValue = field.get(propertyValue);
    }

    return propertyValue;
  }
}
```

SpringBoot 自定义注解校验验证码

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/674042f63c496243ce60362cc8f9f5c5.gif)

在 4.0 版本的 Ant Design Vue 中，提供了一套全新的定制主题方案。不同于 3.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强，包括但不限于：

1. 支持动态切换主题；
2. 支持同时存在多个主题；
3. 支持针对某个/某些组件修改主题变量；
4. ...

通过ConfigProvider即可实时修改主题

```vue
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
      },
    }"
  >
    <a-button />
  </a-config-provider>
</template>
```

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/8d036ea7da71342b5a5b7cb3f285764a.png)

在本项目中，我使用了antdv+pinia+sass的组合，理论上可以在任何前端项目中使用

通过改变页面中的自定义属性theme和dark配合sass+pinia实现实时修改主题色和亮暗模式

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/28fac2b3f7c9e80b6ace958d4ee4c6af.png)



### 1. 对ant-design-vue主题定制

1. 首先，准备好一个vue项目，配置好antdv

```js
"dependencies": {
  "ant-design-vue": "4.x",
  "pinia": "^2.1.6",
  "pinia-plugin-persistedstate": "^3.2.0",
  "vue": "^3.2.41"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^4.2.3",
  "sass": "^1.64.2",
  "unplugin-vue-components": "^0.25.1",
  "vite": "^4.4.6"
}
```

2. 创建一个store，命名为app.js，在里面写上下面的配置代码，颜色变量从scss文件中取得（自行搜索：如何在js中使用scss变量）

```js
import {defineStore} from 'pinia'
import {computed, ref} from 'vue'
import {theme} from 'ant-design-vue'
import variables from '@/styles/variables.module.scss'

/**
 * app 配置 开启持久化
 */
export const useAppStore = defineStore(
  'app',
  () => {
    const themeName = ref('red') // 主题名称
    const darkMode = ref('light') // 颜色模式
    const darkModeComp = computed(() => {
      document.documentElement.setAttribute('data-dark', darkMode.value)
      return darkMode.value
    })
    const themeConfig = computed(() => {
      document.documentElement.setAttribute('data-theme', themeName.value)
      // 主题配置
      return {
        token: {
          colorPrimary: variables[themeName.value] || '#27ba9b',
          colorSuccess: '#1dc779',
          colorWarning: '#ffb302',
          colorError: '#cf4444',
          colorInfo: variables[themeName.value] || '#27ba9b',
          wireframe: true
        },
        algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
      }
    })
    const setThemeName = value => {
      themeName.value = value
    }
    const toggleDarkMode = () => {
      darkMode.value = darkMode.value === 'light' ? 'dark' : 'light'
    }
    return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode}
  },
  {
    persist: true // 开启持久化
  }
)
```

3. 先写上一部分scss变量，文件命名为`variables.module.scss`

```scss
$red: #F5222D;
$orange: #FA541C;
$yellow: #FAAD14;
$cyan: #13C2C2;
$green: #52C41A;
$blue: #2F54EB;
$purple: #722ED1;

:export {
  red: $red;
  orange: $orange;
  yellow: $yellow;
  cyan: $cyan;
  green: $green;
  blue: $blue;
  purple: $purple;
}
```

4. 在App.vue中简单写点测试代码

```vue
<script setup>
import {useAppStore} from "@/stores/app.js"
import variables from '@/styles/variables.module.scss'

const app = useAppStore()
</script>

<template>
  <a-config-provider :theme="app.themeConfig">
    <a-select v-model:value="app.themeName" style="width: 240px">
      <a-select-option v-for="(color, name) in variables" :value="name"> {{ name }}:{{ color }}</a-select-option>
    </a-select>
    <a-select v-model:value="app.darkMode" style="width: 120px">
      <a-select-option value="dark">dark</a-select-option>
      <a-select-option value="light">light</a-select-option>
    </a-select>
    <a-button-group>
      <a-button type="primary">切换主题- {{ app.themeName }}</a-button>
      <a-button @click="app.toggleDarkMode">切换模式{{ app.darkModeComp }}</a-button>
    </a-button-group>
  </a-config-provider>
</template>

<style lang="scss" scoped>
</style>

```

5. 便可以得到下面效果，这样完成了对ant-design-vue组件主题的自定义

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/42264583acce126b4466551e2b67ab79.png)



### 2. 对自定义内容进行主题定制

上面使用的是js操作antdv中的主题，实际开发中，我们会有一部分组件是自己设计，因此为了维持主题的统一性，我们可以使用sass进行主题的定制

如何实现我们指定一个主题名称时，页面自动切换为指定的颜色组合呢

我们可以使用html的自定义属性来控制我们的主题

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/94463b82d29fba7818609ce5dfb00bfb.png)

比如下面这段代码

```scss
body {
  position: relative;
  transition: background-color 0.3s,
  color 0.3s;
  html[data-dark='light'][data-theme='red'] & {
    background-color: red;
    color: #000;
  }
}
```

当`data-dark='light'`和`data-theme='red'`同时成立时，背景颜色设置成红色

那如果我们需要设置多组主题和模式时，代码就会变成下面这个样子

```scss
body {
  position: relative;
  transition: background-color 0.3s,
  color 0.3s;
  html[data-dark='light'][data-theme='red'] & {
    background-color: red;
    color: #000;
  }
  html[data-dark='light'][data-theme='orange'] & {
    background-color: orange;
    color: #000;
  }
  html[data-dark='light'][data-theme='yellow'] & {
    background-color: yellow;
    color: #000;
  }
  html[data-dark='light'][data-theme='cyan'] & {
    background-color: cyan;
    color: #000;
  }
  ...
}

```

因此，我们需要使用sass来帮我们减少重复的代码，使用`@mixin`和`@each`可以批量生成上面重复的片段

```scss
$modes: (
        light: (
                bgColor: #fff,
                infoColor: #000
        ),
        dark: (
                bgColor: #000,
                infoColor: #fff
        )
);

@mixin useTheme() {
  @each $key, $value in $modes {
    html[data-dark='#{$key}'] & {
      @content;
    }
  }
}
```

下面这段代码

```scss
body {
  position: relative;
  transition: background-color 0.3s,
  color 0.3s;
  @include useTheme {
  }
}
```

相当于

```scss
body {
  position: relative;
  transition: background-color 0.3s,
  color 0.3s;
  html[data-dark='light'] & {

  }
  html[data-dark='dark'] & {

  }
  ...
}
```

同样的，因为我们使用了主题色和亮暗模式的组合，所以也需要使用到两层`@each`循环遍历

```scss
@mixin useTheme() {
  @each $key1, $value1 in $modes {
    @each $key2, $value2 in $colors {
      html[data-dark='#{$key1}'][data-theme='#{$key2}'] & {
        @content;
      }
    }
  }
}
```

接下来，就是根据当前的主题和模式返回对应的颜色了，这里我们需要一个全局变量存储当前的颜色和模式

```scss
$curMode: light;
$curTheme: red;
@mixin useTheme() {
  @each $key1, $value1 in $modes {
    $curMode: $key1 !global;
    @each $key2, $value2 in $colors {
      $curTheme: $key2 !global;
      html[data-dark='#{$key1}'][data-theme='#{$key2}'] & {
        @content;
      }
    }
  }
}
```

并完成颜色的定义

```scss
$colors: (
        red: (
                primary: $red,
                info: $red,
        ),
        orange: (
                primary: $orange,
                info: $orange,
        ),
        yellow: (
                primary: $yellow,
                info: $yellow,
        ),
        cyan: (
                primary: $cyan,
                info: $cyan,
        ),
        green: (
                primary: $green,
                info: $green,
        ),
        blue: (
                primary: $blue,
                info: $blue,
        ),
        purple: (
                primary: $purple,
                info: $purple,
        )
);
```



然后，写一个根据`$curMode`和`$curTheme`返回对应值的函数

```scss
@function getModeVar($key) {
  $modeMap: map-get($modes, $curMode);
  @return map-get($modeMap, $key);
}

@function getColor($key) {
  $themeMap: map-get($colors, $curTheme);
  @return map-get($themeMap, $key);
}
```

然后在混合里面就可以使用函数获取当前主题或模式对应的颜色值了

```scss
body {
  position: relative;
  transition: background-color 0.3s,
  color 0.3s;
  @include useTheme {
    background-color: getModeVar('bgColor');
    color: getModeVar('infoColor');
  }
}
```

使用`theme.scss`

```scss
<template>
	<div class="test">test</div>
</template>
<style lang="scss" scoped>
@import "@/styles/theme";

.test {
  @include useTheme {
    background: getColor('primary');
  }
}
</style>
```

![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/d3b5105fb09d50ae0e9b67c95dc65f8f.png)