前后端整合与安全机制

将前端项目加到后端里

• web复制到sb-app
  
• 启动前端项目
  

解决直接返回 User 会涉及隐私问题

• 在LoginResponse封装id和mobile（需与User.java类型一致）
  
• 修改UserService
  
• 在UserController修改类型
  
• 结果：仅展示返回用户id和mobile
  

若有多个进程想同时进行，需改端口

前后端对接

• api包下的user.js：用户输入收到的验证码后，前端调用login验证并完成登录
  
• 检查手机号格式；调用来自user.js的 API 函数login(mobile.value, code.value)
  成功响应（res.code == 200）：显示"登录成功"提示（ELMessage.success）
  
• 测试：
  

登录按钮优化

1. 验证码格式不正确登录按钮禁用
   • 计算 - 当验证码为空或长度小于4位时登录按钮禁用
     
     
   • 效果：
     
2. 登录时显示按钮的加载状态
   • 定义初始值为false：不处于登录状态
     
   • 登录操作开始时，将loading.value设置为true
     登录操作完成后（无论成功还是失败），将loading.value设置为false
     
   • 绑定loadin变量到按钮的loading属性
     loading.value为true 时，按钮会显示加载状态，禁用按钮并显示加载图标。
     

新增登录成功后的页面：dashboard

• 安装依赖：在web下输入命令npm install @element-plus/icons-vue
• 导入useRouter从vue-router，用于路由管理（router最知道前端的页面）
• 调用login函数，并在登录成功后使用router.push跳转到"/dashboard"页面
  
• 用户按下回车键时进行登录操作
  
• 点击退出登录时退到登录界面（"/login"）
  

处理黑盒子（重复的部分）

• 在三个地方重复的黑盒子：输入是mobile，输出是List<User>。（根据手机号查数据库）
  
• 做重构
  
  
  

生成token（JWT令牌），并在用户登录成功后将令牌返回给客户端

• 创建CustomJWTUtil的类
  
• application-dev中的属性需放真实的值
  
  
• UserController 类中注入的 CustomJWTUtil
  
• token字段用于存储生成的 JWT 令牌
  
• 自动生成token，返回给客户端
  
• 测试：
  

long类型怕精度有问题所以转成字符串

"保安亭"：系统的安全机制

• 不需要token校验的
  
• token存起来每次都要带进去
  
• 前端测试：
  • count需有令牌才能计用户总数
    
  • test和注册无需有令牌也能访问
    
  • 用户登录后会返回token值
    
  • count带着token可成功计数
    

• 请求头中包含了Authorization: Bearer {{token}}，表示需要提供有效的 JWT 令牌。
  
• client.global.set('token', response.body.data.token)将返回的令牌存储在全局变量中。
  
• 在store包下创建一个user.js用于存token（类似于一个临时的数据库）
• 在Login.vue导入useUserStore钩子函数，用于与 Vuex 状态管理库进行交互。
  
• 登录成功后调用userStore.setUserInfo(res.data)将用户信息存储到 Vuex 状态管理库中。
  
• Vuex 状态管理库的调试面板
  

登录后数据与浏览器本地连接

• 将"管理员"动态显示当前用户存储在 Vuex 状态管理库中的手机号
  
• 从 localStorage 中获取初始值，没有值就为空
  
• 将用户信息存储到 localStorage 中
  
• 效果：
  

点击退出登录后localhost的东西清掉

• userStore.clearUserInfo()：调用 Vuex 状态管理库中的 userStore 来清除存储的用户信息。
  
• 效果：清除并回到login.js
  

问题：地址栏输入dashboard可以直接进，不安全

• "保安"该做的事：登录页不需要验证
  
• 全局前置守卫：路由跳转之前进行权限控制
  如果需要认证且没有令牌（userStore.token），则重定向到登录页面。
  如果已经登录且访问的是登录页面，则重定向到首页（/dashboard）
  
• 如果userStore>中存在令牌，则将其添加到请求头中。
  

首页展示count的数据

跨异域配置

效果：

修改token

模拟token失效，不停留在这个页面