Java项目实战笔记--基于SpringBoot3.0开发仿12306高并发售票系统--(二)项目实现-第二篇-前端模块搭建及单点登录的实现

• 1
• 2
• 3
• 4
• 5

修改http请求测试

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

测试

• 完成登录功能

  com.neilxu.train.member.controller.MemberController

  @PostMapping("/login") public CommonResp<MemberLoginResp> login(@Valid @RequestBody MemberLoginReq req) { MemberLoginResp resp = memberService.login(req); return new CommonResp<>(resp); }
  • 1
  • 2
  • 3
  • 4
  • 5

  web/src/views/login.vue

  登录
  • 1
  • 2
  • 3
  import { notification } from 'ant-design-vue';
  • 1
  const sendCode = () => { axios.post("http://localhost:8000/member/member/send-code", { mobile: loginForm.mobile }).then(response => { console.log(response); let data = response.data; if (data.success) { notification.success({ description: '发送验证码成功！' }); loginForm.code = "8888"; } else { notification.error({ description: data.message }); } }); }; const login = () => { axios.post("http://localhost:8000/member/member/login", loginForm).then(response => { let data = response.data; if (data.success) { notification.success({ description: '登录成功！' }); console.log("登录成功：", data.content); } else { notification.error({ description: data.message }); } }) }; return { loginForm, sendCode, login };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

• 测试

八、增加axios拦截器，打印请求参数和返回结果

web/src/main.js

• 1

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

测试

九、Vue CLI多环境配置；为axios配置后端域名

• 新增配置文件

  web/.env.dev

  NODE_ENV=development VUE_APP_SERVER=http://localhost:8000
  • 1
  • 2

  web/.prod.dev

  NODE_ENV=production VUE_APP_SERVER=http://train.imooc.com
  • 1
  • 2

• 修改main.js

  axios.defaults.baseURL = process.env.VUE_APP_SERVER; console.log('环境：', process.env.NODE_ENV); console.log('服务端：', process.env.VUE_APP_SERVER);
  • 1
  • 2
  • 3

• 修改package.json

  "serve-dev": "vue-cli-service serve --mode dev --port 9000", "serve-prod": "vue-cli-service serve --mode prod --port 9000",
  • 1
  • 2

• 修改login.vue

  去掉baseURL

  const sendCode = () => { axios.post("/member/member/send-code", { mobile: loginForm.mobile }).then(response => { let data = response.data; if (data.success) { notification.success({ description: '发送验证码成功！' }); loginForm.code = "8888"; } else { notification.error({ description: data.message }); } }); }; const login = () => { axios.post("/member/member/login", loginForm).then(response => { let data = response.data; if (data.success) { notification.success({ description: '登录成功！' }); } else { notification.error({ description: data.message }); } }) };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

• 重启测试

十、增加web控台主页，登录成功后跳转主页

• 修改路由文件

  web/src/router/index.js

  import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/login', component: () => import('../views/login.vue') }, { path: '/', component: () => import('../views/main.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

• 增加控台主页面

  web/src/views/main.vue

  从ant design vue官网扒代码

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114

注意

复制过来后可能出现兼容问题，例如这里需要增加id属性，不然logo就看不到了

还有就是注意这里加个名字，不然还会有ESLint语法报错

• 1
• 2

• 修改login.vue

  import { useRouter } from 'vue-router' export default defineComponent({ name: "login-view", setup() { const router = useRouter(); const loginForm = reactive({ mobile: '13000000000', code: '', });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  const login = () => { axios.post("/member/member/login", loginForm).then(response => { let data = response.data; if (data.success) { notification.success({ description: '登录成功！' }); // 登录成功，跳到控台主页 router.push("/"); } else { notification.error({ description: data.message }); } }) };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

• 测试效果

十一、制作Vue3公共组件

这里我们将头部header和侧边栏sider提取出来作为组件，使用课程的vue3语法

• 提取the-header组件

  web/src/views/main.vue

  更新为左边，后面同理

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103

web/src/components/the-header.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 提取the-sider组件

  web/src/views/main.vue

这里注意icons删了且the-sider组件里也没加上是因为前面main.js已经全局引用了icon

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54

web/src/components/the-sider.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66

• 测试效果

十二、实现JWT单点登录功能

1.单点登录2种方式的介绍

• redis+token

  生成的token是无意义字符串，每个用户每次登录都随机生成，token作为key，用户信息作为value存储在redis中

  【每次登录后端都随机生成字符串token，返给前端保存，之后请求时候header带上token，后端查redis去校验】

• jwt

  生成的token是含有用户信息的一段字符串

  【每次登陆后端都由jwt工具包生成token，返给前端保存，之后请求时候header带上token，后端用工具包解密校验token】

本项目采用方式二实现单点登录

2.JWT单点登录原理与存在的问题及解决方案

JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息作为 JSON 对象。JWT 可以使用 HMAC 算法或 RSA 的公钥/私钥对来签名，以验证发送者的身份以及确保消息的完整性。

JWT 通常由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。其结构如下：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

• 1

header.payload.signature

• 1

• 头部（Header）：包含了两部分信息：令牌类型（即JWT）和所使用的签名算法。
• 载荷（Payload）：包含了所要传递的信息，如用户ID、用户名等。
• 签名（Signature）：由头部、载荷以及一个密钥（只有服务器知道的）共同组成，用于验证消息的完整性。

JWT 的优点之一是它的信息是经过签名的，因此接收者可以验证它是否被篡改。此外，由于信息被编码为 JSON 格式，因此它们可以轻松地在不同平台之间传递。

在实际应用中，JWT 经常用于身份验证和授权机制，特别是在 Web 应用程序中。用户登录后，服务器可以颁发一个 JWT，之后用户每次请求时都将该 JWT 发送给服务器，服务器通过验证 JWT 的签名来确认用户的身份和权限。

​ ----------来自ChatGPT的回答

• 存在的问题

  • token被解密

    解决：加盐值（密钥），每个项目的盐值不能一样

  • token被拿到第三方使用

    例如 ChatGPT 国内很多人就把这个包装了一层变成自己的产品来收费别人，实际用户交费后登录进去用的都是作者自己的ChatGPT账号的token

    解决：目前只能是限流来制止

3.使用Hutool生成JWT单点登录token

• 修改登录返回结果类，增加token字段

  com.neilxu.train.member.resp.MemberLoginResp

  package com.neilxu.train.member.resp; public class MemberLoginResp { private Long id; private String mobile; private String token; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getMobile() { return mobile; } public void setMobile(String mobile) { this.mobile = mobile; } public String getToken() { return token; } public void setToken(String token) { this.token = token; } @Override public String toString() { final StringBuffer sb = new StringBuffer("MemberLoginResp{"); sb.append("id=").append(id); sb.append(", mobile='").append(mobile).append('\''); sb.append(", token='").append(token).append('\''); sb.append('}'); return sb.toString(); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

• 修改登录service方法

  com.neilxu.train.member.service.MemberService

  public MemberLoginResp login(MemberLoginReq req) { String mobile = req.getMobile(); String code = req.getCode(); Member memberDB = selectByMobile(mobile); // 如果手机号不存在，则插入一条记录 if (ObjectUtil.isNull(memberDB)) { throw new BusinessException(BusinessExceptionEnum.MEMBER_MOBILE_NOT_EXIST); } // 校验短信验证码 if (!"8888".equals(code)) { throw new BusinessException(BusinessExceptionEnum.MEMBER_MOBILE_CODE_ERROR); } MemberLoginResp memberLoginResp = BeanUtil.copyProperties(memberDB, MemberLoginResp.class); Map<String, Object> map = BeanUtil.beanToMap(memberLoginResp); String key = "neilxu12306"; String token = JWTUtil.createToken(map, key.getBytes()); memberLoginResp.setToken(token); return memberLoginResp; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

• 测试

• 优化：封装JWT工具类

  放在common模块下

  com.neilxu.train.common.util.JwtUtil

  package com.neilxu.train.common.util; import cn.hutool.core.date.DateField; import cn.hutool.core.date.DateTime; import cn.hutool.json.JSONObject; import cn.hutool.jwt.JWT; import cn.hutool.jwt.JWTPayload; import cn.hutool.jwt.JWTUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.util.HashMap; import java.util.Map; public class JwtUtil { private static final Logger LOG = LoggerFactory.getLogger(JwtUtil.class); /** * 盐值很重要，不能泄漏，且每个项目都应该不一样，可以放到配置文件中 */ private static final String key = "neilxu12306"; public static String createToken(Long id, String mobile) { DateTime now = DateTime.now(); DateTime expTime = now.offsetNew(DateField.SECOND, 10); Map<String, Object> payload = new HashMap<>(); // 签发时间 payload.put(JWTPayload.ISSUED_AT, now); // 过期时间 payload.put(JWTPayload.EXPIRES_AT, expTime); // 生效时间 payload.put(JWTPayload.NOT_BEFORE, now); // 内容 payload.put("id", id); payload.put("mobile", mobile); String token = JWTUtil.createToken(payload, key.getBytes()); LOG.info("生成JWT token：{}", token); return token; } public static boolean validate(String token) { JWT jwt = JWTUtil.parseToken(token).setKey(key.getBytes()); // validate包含了verify boolean validate = jwt.validate(0); LOG.info("JWT token校验结果：{}", validate); return validate; } public static JSONObject getJSONObject(String token) { JWT jwt = JWTUtil.parseToken(token).setKey(key.getBytes()); JSONObject payloads = jwt.getPayloads(); payloads.remove(JWTPayload.ISSUED_AT); payloads.remove(JWTPayload.EXPIRES_AT); payloads.remove(JWTPayload.NOT_BEFORE); LOG.info("根据token获取原始内容：{}", payloads); return payloads; } public static void main(String[] args) { createToken(1L, "123"); String token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE2NzY4OTk4MjcsIm1vYmlsZSI6IjEyMyIsImlkIjoxLCJleHAiOjE2NzY4OTk4MzcsImlhdCI6MTY3Njg5OTgyN30.JbFfdeNHhxKhAeag63kifw9pgYhnNXISJM5bL6hM8eU"; validate(token); getJSONObject(token); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

  注意：payload里放了过期时间相关，若是过期了，token校验会不通过（但是仍然可以解密得到用户信息）

• 优化后修改service方法

  com.neilxu.train.member.service.MemberService

  public MemberLoginResp login(MemberLoginReq req) { String mobile = req.getMobile(); String code = req.getCode(); Member memberDB = selectByMobile(mobile); // 如果手机号不存在，则插入一条记录 if (ObjectUtil.isNull(memberDB)) { throw new BusinessException(BusinessExceptionEnum.MEMBER_MOBILE_NOT_EXIST); } // 校验短信验证码 if (!"8888".equals(code)) { throw new BusinessException(BusinessExceptionEnum.MEMBER_MOBILE_CODE_ERROR); } MemberLoginResp memberLoginResp = BeanUtil.copyProperties(memberDB, MemberLoginResp.class); String token = JwtUtil.createToken(memberLoginResp.getId(), memberLoginResp.getMobile()); memberLoginResp.setToken(token); return memberLoginResp; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

• 测试

4.使用vuex保存登录信息

• 修改/store/index.js

  这里是全局变量

  import { createStore } from 'vuex' export default createStore({ state: { member: {} }, getters: { }, mutations: { setMember (state, _member) { state.member = _member; } }, actions: { }, modules: { } })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

• 保存登录信息

  web/src/views/login.vue

  import store from "@/store";
  • 1
  const login = () => { axios.post("/member/member/login", loginForm).then(response => { let data = response.data; if (data.success) { notification.success({ description: '登录成功！' }); // 登录成功，跳到控台主页 router.push("/"); // store保存登录信息 store.commit("setMember", data.content); } else { notification.error({ description: data.message }); } }) };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

• 读取信息并展示

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

• 测试效果

5.vuex配合h5 session缓存，解决浏览器刷新丢失数据的问题

上面第4步有个问题：刷新浏览器，登录信息就没了

• 新增自定义js

  web/public/js/session-storage.js

  SessionStorage = { get: function (key) { var v = sessionStorage.getItem(key); if (v && typeof(v) !== "undefined" && v !== "undefined") { return JSON.parse(v); } }, set: function (key, data) { //JSON.stringify() 是 JavaScript 中一个用于将 JavaScript 对象或值转换为 JSON 字符串的方法。 sessionStorage.setItem(key, JSON.stringify(data)); }, remove: function (key) { sessionStorage.removeItem(key); }, clearAll: function () { sessionStorage.clear(); } };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

  sessionStorage和localStorage区别：

  sessionStorage 和 localStorage 是 HTML5 中引入的 Web 存储 API，它们都用于在客户端存储数据，但有一些重要的区别：

  1. 作用域：
     • sessionStorage：存储在 sessionStorage 中的数据只在当前会话期间有效。当用户关闭浏览器标签或窗口时，会话结束，sessionStorage 中的数据也会被清除。
     • localStorage：存储在 localStorage 中的数据是永久性的，除非通过 JavaScript 显式删除，否则会一直保存在浏览器中，即使用户关闭了浏览器窗口或重新启动计算机。
  2. 数据共享：
     • sessionStorage：每个页面的 sessionStorage 是独立的，即使是同一个页面打开了多个标签，它们之间的 sessionStorage 也是互相隔离的，无法共享数据。
     • localStorage：所有同源（相同协议、主机和端口）页面共享相同的 localStorage，这意味着一个页面设置的 localStorage 数据可以被同一域下的其他页面访问和修改。
  3. 容量限制：
     • sessionStorage 和 localStorage 都有存储容量限制，但具体限制因浏览器而异。一般来说，localStorage 的容量限制要大于 sessionStorage。
  4. 存储期限：
     • sessionStorage：存储在 sessionStorage 中的数据在当前会话结束时被清除，即用户关闭浏览器标签或窗口时。
     • localStorage：存储在 localStorage 中的数据没有过期时间，除非通过 JavaScript 显式删除。
  5. API 使用：
     • 两者的 API 使用方法类似，都是通过 setItem(), getItem(), removeItem() 等方法来操作存储的数据。

  总的来说，sessionStorage 适合临时存储会话相关的数据，而 localStorage 适合长期存储的数据，如用户首选项、本地缓存等。

  ​ -------------来自ChatGPT的回答

• 引入js

  web/public/index.html

  <script src="<%= BASE_URL %>js/session-storage.js">script>
  • 1

• 修改store全局变量

  web/src/store/index.js

  import { createStore } from 'vuex' const MEMBER = "MEMBER"; export default createStore({ state: { member: window.SessionStorage.get(MEMBER) || {} }, getters: { }, mutations: { setMember (state, _member) { state.member = _member; window.SessionStorage.set(MEMBER, _member); } }, actions: { }, modules: { } })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

• 测试

  刷新后正常

6.演示gateway拦截器的使用

• Test1Filter

  com.neilxu.train.gateway.config.Test1Filter

  package com.neilxu.train.gateway.config; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.cloud.gateway.filter.GatewayFilterChain; import org.springframework.cloud.gateway.filter.GlobalFilter; import org.springframework.core.Ordered; import org.springframework.stereotype.Component; import org.springframework.web.server.ServerWebExchange; import reactor.core.publisher.Mono; @Component public class Test1Filter implements GlobalFilter, Ordered { private static final Logger LOG = LoggerFactory.getLogger(Test1Filter.class); @Override public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) { LOG.info("Test1Filter"); return chain.filter(exchange); } @Override public int getOrder() { return 0; } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

• Test2Filter

  com.neilxu.train.gateway.config.Test2Filter

  package com.neilxu.train.gateway.config; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.cloud.gateway.filter.GatewayFilterChain; import org.springframework.cloud.gateway.filter.GlobalFilter; import org.springframework.core.Ordered; import org.springframework.stereotype.Component; import org.springframework.web.server.ServerWebExchange; import reactor.core.publisher.Mono; @Component public class Test2Filter implements GlobalFilter, Ordered { private static final Logger LOG = LoggerFactory.getLogger(Test2Filter.class); @Override public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) { LOG.info("Test2Filter"); return chain.filter(exchange); } @Override public int getOrder() { return 1; } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

• 重启测试

7.为gateway增加登录校验拦截器

自动刷新maven依赖：

• 增加依赖

  gateway的 pom文件

  <dependency> <groupId>cn.hutoolgroupId> <artifactId>hutool-allartifactId> dependency> <dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-devtoolsartifactId> <scope>runtimescope> <optional>trueoptional> dependency>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

• 增加拦截器

  package com.neilxu.train.gateway.config; import com.neilxu.train.gateway.util.JwtUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.cloud.gateway.filter.GatewayFilterChain; import org.springframework.cloud.gateway.filter.GlobalFilter; import org.springframework.core.Ordered; import org.springframework.http.HttpStatus; import org.springframework.stereotype.Component; import org.springframework.web.server.ServerWebExchange; import reactor.core.publisher.Mono; @Component public class LoginMemberFilter implements Ordered, GlobalFilter { private static final Logger LOG = LoggerFactory.getLogger(LoginMemberFilter.class); @Override public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) { String path = exchange.getRequest().getURI().getPath(); // 排除不需要拦截的请求 if (path.contains("/admin") || path.contains("/hello") || path.contains("/member/member/login") || path.contains("/member/member/send-code")) { LOG.info("不需要登录验证：{}", path); return chain.filter(exchange); } else { LOG.info("需要登录验证：{}", path); } // 获取header的token参数 String token = exchange.getRequest().getHeaders().getFirst("token"); LOG.info("会员登录验证开始，token：{}", token); if (token == null || token.isEmpty()) { LOG.info( "token为空，请求被拦截" ); exchange.getResponse().setStatusCode(HttpStatus.UNAUTHORIZED); return exchange.getResponse().setComplete(); } // 校验token是否有效，包括token是否被改过，是否过期 boolean validate = JwtUtil.validate(token); if (validate) { LOG.info("token有效，放行该请求"); return chain.filter(exchange); } else { LOG.warn( "token无效，请求被拦截" ); exchange.getResponse().setStatusCode(HttpStatus.UNAUTHORIZED); return exchange.getResponse().setComplete(); } } /** * 优先级设置 值越小 优先级越高 * * @return */ @Override public int getOrder() { return 0; } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

  这里将JwtUtil从common复制了一个到gateway，不再引入common依赖

  小tips：

  ctrl + alt + t ：可以给选中的代码块加try catch

• 测试

  GET http://localhost:8000/member/member/count Accept: application/json token: 123 ###
  • 1
  • 2
  • 3
  • 4
  • 5

8.为axios增加登录相关拦截：请求时带上token，返回时校验返回码是不是401

• 修改main.js

  web/src/main.js

  /** * axios拦截器 */ axios.interceptors.request.use(function (config) { console.log('请求参数：', config); const _token = store.state.member.token; if (_token) { config.headers.token = _token; console.log("请求headers增加token:", _token); } return config; }, error => { return Promise.reject(error); }); axios.interceptors.response.use(function (response) { console.log('返回结果：', response); return response; }, error => { console.log('返回错误：', error); const response = error.response; const status = response.status; if (status === 401) { // 判断状态码是401 跳转到登录页 +console.log("未登录或登录超时，跳到登录页"); store.commit("setMember", {}); notification.error({description: "未登录或登录超时"}); router.push('/login'); } return Promise.reject(error); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

• 修改控台页面

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

• 测试

注意：

可能由于axios版本问题，这里会出现页面直接把401报错展示到顶层，如图所示

解决办法：

查看web前端目录下vue.config.js配置文件，如配置文件入下:

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true })

• 1
• 2
• 3
• 4

则增加如下配置即可关闭问题中所示的错误提示界面：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 其他配置项 devServer:{ client:{ overlay: false } } })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

9.为路由页面增加登录拦截，访问所有的控台页面都需要登录

• 修改路由js

  import { createRouter, createWebHistory } from 'vue-router' import store from "@/store"; import {notification} from "ant-design-vue"; const routes = [ { path: '/login', component: () => import('../views/login.vue') }, { path: '/', component: () => import('../views/main.vue'), meta: { loginRequire: true }, } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) // 路由登录拦截 router.beforeEach((to, from, next) => { // 要不要对meta.loginRequire属性做监控拦截 if (to.matched.some(function (item) { console.log(item, "是否需要登录校验：", item.meta.loginRequire || false); return item.meta.loginRequire })) { const _member = store.state.member; console.log("页面登录校验开始：", _member); if (!_member.token) { console.log("用户未登录或登录超时！"); notification.error({ description: "未登录或登录超时" }); next('/login'); } else { next(); } } else { next(); } }); export default router
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

• 测试

  直接访问控台页面——“/"