总体

整体的功能就是表单校验和登入登出 ![Pasted image 20250803102358](../../../_assets/0e7a2c8-Pasted image 20250803102358.png) 使用Element+中的form组件

自定义校验

使用Element+ui的自定义规则： ![Pasted image 20250803133537](../../../_assets/cd26905-Pasted image 20250803133537.png) ![Pasted image 20250803134322](../../../_assets/5508239-Pasted image 20250803134322.png)

统一校验

当用户不点击输入框（单独校验），防止用户直接点击登录，而进行统一校验。 ![Pasted image 20250803135706](../../../_assets/eaec954-Pasted image 20250803135706.png)

使用pinia管理用户数据并持久化

![Pasted image 20250803144458](../../../_assets/6061b53-Pasted image 20250803144458.png) ![Pasted image 20250803144510](../../../_assets/b254eb4-Pasted image 20250803144510.png) token、cookie？ 使用pinia-plugin-persistedstate插件实现数据持久化，localStore

携带token和在请求拦截中携带token

![Pasted image 20250803150503](../../../_assets/1b47f8f-Pasted image 20250803150503.png)

退出登录

![Pasted image 20250803153001](../../../_assets/1b41b59-Pasted image 20250803153001.png)

token失效拦截

![Pasted image 20250803153122](../../../_assets/d102361-Pasted image 20250803153122.png)