用户管理，用户登录，登录校验（界面+接口）
用户表设计与持久层代码生成
基本的增删改查
用户名不能重复（特殊需求）
关于密码的两层加密处理：加密传输+加密存储（特殊需求）
重置密码（特殊需求）
登录功能
前端登录接口
后端登录接口
登录成功后的处理
退出登录
✿用户表设计与持久层代码生成
首先在数据库当中执行下面的sql, 其中主键是id，但是对login_name做了唯一键处理，就是在整个系统当中，login_name是不能重复的
1. 用户表设计
drop table if exists `user`;create table `user` (`id` bigint not null comment 'ID',`login_name` varchar(50) not null comment '登录名',`name` varchar(50) comment '昵称',`password` char(32) not null comment '密码',primary key (`id`),unique key `login_name_unique` (`login_name`)) engine=innodb default charset=utf8mb4 comment='用户';
2. 代码生成
修改generator-config.xml当中的最后一行，然后执行mybatis-generator命令生成user的持久层代码：domain/User.java, domain/UserExample.java，mapper/UserMapper.java, UserMapper.xml
<table tableName="user"/>
✿用户表的增删改查
1. 后端代码展示
（1）controller部分
直接从EbookController当中将内容复制到UserController当中，然后将Ebook替换成User，将ebook替换成user。
（2）service部分
直接从EbookService当中将内容复制到UserService当中，然后将Ebook替换成User，将ebook替换成user。然后在list方法当中的动态sql部分进行修改一下：
// 动态sql的写法if(!ObjectUtils.isEmpty(req.getLoginName())) {criteria.andLoginNameEqualTo(req.getLoginName());}
（3）req部分
这里就包含两个文件，一个是UserQueryReq（和domain当中的User.java是一样的），一个是UserSaveReq，内容如下:
package com.taopoppy.wiki.req;import javax.validation.constraints.NotNull;import javax.validation.constraints.Pattern;public class UserSaveReq {private Long id;@NotNull(message = "【用户名】不能为空")private String loginName;@NotNull(message = "【昵称】不能为空")private String name;@NotNull(message = "【密码】不能为空")// @Length(min = 6, max = 20, message = "【密码】6~20位")@Pattern(regexp = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,32}$", message = "【密码】至少包含 数字和英文，长度6-32")private String password;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {StringBuilder sb = new StringBuilder();sb.append(getClass().getSimpleName());sb.append(" [");sb.append("Hash = ").append(hashCode());sb.append(", id=").append(id);sb.append(", loginName=").append(loginName);sb.append(", name=").append(name);sb.append(", password=").append(password);sb.append("]");return sb.toString();}}
（4）resp部分
UserQueryResp.java的内容和domain当中User.java也是一样的
2. 前端代码展示
前端代码用户管理实际上和电子书管理几乎一致，页面主要集中在views\admin\admin-user.vue，src\views\doc.vue, src\router\index.ts和src\components\the-header.vue当中，具体的这里就不展示了。
✿用户名重复校验与自定义异常
1. 新增用户增加重复校验
当我们在新增用户的时候，应该先去检查一下数据库当中是否存在用户，然后再去进行新增：
/*** 根据用户名查找用户* @param LoginName* @return*/public User selectByLoginName(String LoginName) {UserExample userExample = new UserExample();// createCriteria相当于where条件UserExample.Criteria criteria = userExample.createCriteria();// 动态sql的写法criteria.andLoginNameEqualTo(LoginName);List<User> usersList = userMapper.selectByExample(userExample);// 判断List是否为空if(CollectionUtils.isEmpty(usersList)) {return null;} else {return usersList.get(0);}}/*** 电子书保存接口(保存包括编辑保存->更新， 也包括新增保存->新增， 根据req是否有id来判断)* @param req 电子书保存参数*/public void save(UserSaveReq req) {User user = CopyUtil.copy(req, User.class);if(ObjectUtils.isEmpty(req.getId())) {// 判断用户名是否在数据库存在User userDB = selectByLoginName(req.getLoginName());if(ObjectUtils.isEmpty(userDB)) {// 用户名不存在就新增user.setId(snowFlake.nextId());userMapper.insert(user);} else {// 提示已存在（利用自定义异常，抛出一个自定义异常）throw new BusinessException(BusinessExceptionCode.USER_LOGIN_NAME_EXIST);}} else {// 更新// 因为updateByPrimaryKey传递的User类型的参数，所以需要将UserSaveReq 转化成UseruserMapper.updateByPrimaryKey(user);}}
2. 校验重复抛出自定义异常
上面我们在检查到用户名在数据库当中已经存在的时候，抛出了一个BusinessException的异常，这个异常是我们自己定义的，同时我们在之前就说过，抛出的异常全部在ControllerExceptionHandler当中进行捕获和处理，我们下面来说明一下：
package com.taopoppy.wiki.exception;public class BusinessException extends RuntimeException{private BusinessExceptionCode code;public BusinessException (BusinessExceptionCode code) {super(code.getDesc());this.code = code;}public BusinessExceptionCode getCode() {return code;}public void setCode(BusinessExceptionCode code) {this.code = code;}/*** 不写入堆栈信息，提高性能*/@Overridepublic Throwable fillInStackTrace() {return this;}}
package com.taopoppy.wiki.exception;public enum BusinessExceptionCode {USER_LOGIN_NAME_EXIST("登录名已存在"),LOGIN_USER_ERROR("用户名不存在或密码错误"),VOTE_REPEAT("您已点赞过"),;private String desc;BusinessExceptionCode(String desc) {this.desc = desc;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}}
前面我们对参数校验的时候对BindException类型的错误进行的了处理，现在我们同样在ControllerExceptionHandler.java当中对BusinessException和普遍的错误Exception做处理：
package com.taopoppy.wiki.controller;import com.taopoppy.wiki.exception.BusinessException;import com.taopoppy.wiki.resp.CommonResp;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.validation.BindException;import org.springframework.web.bind.annotation.ControllerAdvice;import org.springframework.web.bind.annotation.ExceptionHandler;import org.springframework.web.bind.annotation.ResponseBody;/*** 统一异常处理、数据预处理等*/@ControllerAdvicepublic class ControllerExceptionHandler {private static final Logger LOG = LoggerFactory.getLogger(ControllerExceptionHandler.class);/*** 校验异常统一处理* @param e* @return*/@ExceptionHandler(value = BindException.class)@ResponseBodypublic CommonResp validExceptionHandler(BindException e) {CommonResp commonResp = new CommonResp();LOG.warn("参数校验失败：{}", e.getBindingResult().getAllErrors().get(0).getDefaultMessage());commonResp.setSuccess(false);commonResp.setMessage(e.getBindingResult().getAllErrors().get(0).getDefaultMessage());return commonResp;}/*** 校验异常统一处理* @param e* @return*/@ExceptionHandler(value = BusinessException.class)@ResponseBodypublic CommonResp validExceptionHandler(BusinessException e) {CommonResp commonResp = new CommonResp();LOG.warn("业务异常：{}", e.getCode().getDesc()); // 获取到业务异常的枚举commonResp.setSuccess(false);commonResp.setMessage(e.getCode().getDesc());return commonResp;}/*** 校验异常统一处理* @param e* @return*/@ExceptionHandler(value = Exception.class)@ResponseBodypublic CommonResp validExceptionHandler(Exception e) {CommonResp commonResp = new CommonResp();LOG.error("系统异常：", e);commonResp.setSuccess(false);commonResp.setMessage("系统出现异常，请联系管理员");return commonResp;}}
3. 用户名无法修改
同时用户名也不能随便修改，所以我们在编辑的时候是需要判断的。
判断也分两个步骤，第一是前端判断，对用户名的输入框进行判断，如果是新增的话，就可以编辑，如果是编辑用户信息的话，用户名的输入框就设置disabled。
可是前端的校验是不安全的，因为可以被绕过（前端可以打开F12把输入框的disabled属性去掉），所以我们还需要在后端进行校验，下面这个updateByPrimaryKeySelective方法表示只有user里面的属性有值，才会去更新，没有值就不更新这个字段，所以即便前端传来了新的用户名，在这里我们手动置为null，数据库就不会去更新这个字段。
// 更新user.setLoginName(null);userMapper.updateByPrimaryKeySelective(user);
✿关于密码的两层加密处理
密码保存在数据库当中不能以明文的方式存储，必须以密文的方式，也就是将明文进行一个MD5的处理即可。
1. 密码加密存储
@PostMapping("/save")public CommonResp save(@Valid @RequestBody UserSaveReq req) {// 将密码进行md5加密，也就是加密后变成了一个32位16进制的字符串req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));CommonResp resp = new CommonResp<>();userService.save(req);return resp;}
2. 密码加密传输
在前端我们有一个md5.js文件的，其中的hexMd5方法和java当中DigestUtils.md5DigestAsHex() 对相同的字符串加密的结果是一样的，这个文件是在public/index.html当中是进行引入了的。
前端我们要在点击保存按钮的时候对输入的密码进行加密，然后加密的字符串传到后端再进行一次加密放在数据库当中，这就是两层加密。前端对输入的密码加密是为了保证传输的过程当中不被截获，后端对加密的密码再加密为了保证数据的安全性。
前端的加密代码在admin-user.vue当中：
declare let hexMd5: any; // 告诉TS这两个变量定义过了，实际在md5.js当中定义在了全局declare let KEY: any;user.value.password = hexMd5(user.value.password + KEY);
其中KEY表示盐值，也定义在md5.js当中，帮助增强加密的复杂性的。
✿增加重置密码功能
1. 修改用户时，不能修改密码
我们新增用户的时候，密码是需要手动输入的，但是在编辑用户的时候，是不能修改面的，所以在修改用户信息的时候，直接可以不显示密码的输入框，因为后端返回来的是一堆密文，也看不懂。
前端在新增用户和修改用户是判断一下是否显示用户密码的输入框即可。后端也需要和前面将登录名置为null一样，将密码也置为null
user.setLoginName(null);user.setPassword(null); // 将密码也置为nulluserMapper.updateByPrimaryKeySelective(user);
2. 单独开发重置密码表单和接口
我们新添加一个重置密码的按钮，弹出一个表单，表单当中只有一个新密码的输入框，整个也就是说你前端是没办法看到原始密码的明文的。
（1）后端代码展示
@PostMapping("/reset-password")public CommonResp resetPassword(@Valid @RequestBody UserResetPasswordReq req) {// 将密码进行md5加密，也就是加密后变成了一个32位16进制的字符串req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));CommonResp resp = new CommonResp<>();userService.resetPassword(req);return resp;}
package com.taopoppy.wiki.req;import javax.validation.constraints.NotNull;import javax.validation.constraints.Pattern;public class UserResetPasswordReq extends PageReq{private Long id;@NotNull(message = "【密码】不能为空")// @Length(min = 6, max = 20, message = "【密码】6~20位")@Pattern(regexp = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,32}$", message = "【密码】至少包含 数字和英文，长度6-32")private String password;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {StringBuilder sb = new StringBuilder();sb.append(getClass().getSimpleName());sb.append(" [");sb.append("Hash = ").append(hashCode());sb.append(", id=").append(id);sb.append(", password=").append(password);sb.append("]");return sb.toString();}}
/*** 重置密码* @param req 电子书保存参数*/public void resetPassword(UserResetPasswordReq req) {User user = CopyUtil.copy(req, User.class); // user当中只有id和password两个属性值userMapper.updateByPrimaryKeySelective(user);}
（2）前端代码展示
前端代码均在admin-user.vue当中展示，实际上重置密码的表单和修改用户几乎差不多，这里就不做过多展示。
✿单点登录和JWT
1. 登录
- 前端在登录界面输入用户名和密码
- 用户名和密码传入后端进行校验
- 校验成功生成token
- 后端将token保存在redis当中
- token传给前端，前端也保存一份
2. 校验
- 前端请求时，带上token（放在header当中）
- 后端有登录拦截器，校验token（到redis获取token，能获取的到说明token有效，获取不到说明token无效或者过期）
- 校验成功则继续后面的业务
- 校验不成功则返回标识，前端拿到标识就返回登录页面
3. 单点登录系统
假如一个公司内有好几个系统，A,B,C，好比淘宝，支付宝，花呗都是同一个公司下的系统，假如登录了A，然后跳到B还要重新登录这是不可能的，然后不可能每个系统都自己做一套登录系统。
那么登录系统就会单独做一套X单点登录系统，它负责所有系统ABC的登录业务，包括用户管理，登录，登录检验，退出登录。一般有两种情况，A,B,C自己画页面，接口全部由X单点系统提供，第二种情况就是登录页面都由X单点系统来提供
4. token和JWT
token：本质就是唯一的一串字符串，相当于证明用户登录过的有效期令牌。token字符串本身是没有任何含义的，只要保证它是唯一的即可，所以可以创建token的方法很多，比如雪花算法，UUID，JWT也是生成token的技术。
JWT：是一种加密方式，使得token变成加密字符串，同时包含了业务信息，这个业务信息就是用户的信息，所以token字符串就变得有意义了，意义在于包含了用户的相关信息和登录信息。
JWT加密后的字符串实际包含三个部分：
- 第一部分：头部，会标识该JWT使用的什么加密算法
- 第二部分：业务信息，即用户的登录信息
- 第三部分：签名信息
JWT从加密技术层面来说三个部分是息息相关的，可以解密，整个技术应用并不复杂，前面我们说的是token+redis，现在我们说的是JWT+redis，这是一个通用的做法，关于JWT的使用呢其实引入一个依赖包即可：
<dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.5.0</version></dependency>
然后主要使用的两个方法就是JwtUtil.sign和JwtUtil.verity，一个加密一个解密。
✿登录功能开发
1. 后端增加登录接口
前端输入用户名和密码后，点击登录，前端会进行一次加密，后端接收的请求包含用户名和一次加密的密码，然后后端的逻辑是先去查用户名，用户名是唯一的，然后再将二次加密的密码和该用户的数据库密码进行比对，如果成功则返回用户信息，不成功返回响应的提示：
package com.taopoppy.wiki.req;import javax.validation.constraints.NotNull;import javax.validation.constraints.Pattern;public class UserLoginReq {@NotEmpty(message = "【用户名】不能为空")private String loginName;@NotEmpty(message = "【密码】不能为空")// @Length(min = 6, max = 20, message = "【密码】6~20位")@Pattern(regexp = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,32}$", message = "【密码】规则不正确")private String password;public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {StringBuilder sb = new StringBuilder();sb.append(getClass().getSimpleName());sb.append(" [");sb.append("Hash = ").append(hashCode());sb.append(", loginName=").append(loginName);sb.append(", password=").append(password);sb.append("]");return sb.toString();}}
package com.taopoppy.wiki.resp;public class UserLoginResp {private Long id;private String loginName;private String name;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {StringBuilder sb = new StringBuilder();sb.append(getClass().getSimpleName());sb.append(" [");sb.append("Hash = ").append(hashCode());sb.append(", id=").append(id);sb.append(", loginName=").append(loginName);sb.append(", name=").append(name);sb.append("]");return sb.toString();}}
@PostMapping("/login")public CommonResp login(@Valid @RequestBody UserLoginReq req) {// 这里同样要将前端加密的密文再加密，两次加密后才能和数据库当中保存的一致req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));CommonResp<UserLoginResp> resp = new CommonResp<>();UserLoginResp userLoginResp = userService.login(req);resp.setContent(userLoginResp);return resp;}
/*** 登录* @param req*/public UserLoginResp login(UserLoginReq req) {// 先按照用户名去查User userDB = selectByLoginName(req.getLoginName());// 查出来用户名对应的用户再去对比密码if(ObjectUtils.isEmpty(userDB)) {// 用户名不存在LOG.info("用户名不存在，{}", req.getLoginName());throw new BusinessException(BusinessExceptionCode.LOGIN_USER_ERROR);} else {if(userDB.getPassword().equals(req.getPassword())) {// 登录成功UserLoginResp userLoginResp = CopyUtil.copy(userDB, UserLoginResp.class);return userLoginResp;} else {// 密码输入错误LOG.info("密码不对，输入密码，{}，数据库密码，{}", req.getLoginName());throw new BusinessException(BusinessExceptionCode.LOGIN_USER_ERROR);}}}
2. 前端增加登录模态框
前端的登录模态框是写在the-header.vue当中的，可以到文件当中去查看
✿登录成功处理
1. 后端保存信息
后端保存用户信息，需要集成redis，登录成功后，生成token，以token为key，以用户信息为value，放入redis当中，前端发来请求需要登录校验的接口，后端就会拿着前端发来的token去redis找，找不到说明token在redis当中已经过期或者压根不在redis当中。
（1）集成redis
在pom.xml当中去添加下面的依赖
<!--整合redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>
然后在application.properties当中添加redis的连接配置：
# redis配置spring.redis.host=r-uf6ljbcdaxobsifyctpd.redis.rds.aliyuncs.comspring.redis.port=6379spring.redis.password=Redis000
（2）改造代码
由于我们后端在登录成功后要做两个事情
- 将生成token进行返回给前端，
- 将token存储在redis当中
所以我们首先先修改一下UserLoginResp.java, 添加下面的内容，就是添加了一个新属性token
package com.taopoppy.wiki.resp;public class UserLoginResp {private String token;public String getToken() {return token;}public void setToken(String token) {this.token = token;}}
然后将token要保存在redis当中,我们就要修改UserController.java:
@PostMapping("/login")public CommonResp login(@Valid @RequestBody UserLoginReq req) {// 这里同样要将前端加密的密文再加密，两次加密后才能和数据库当中保存的一致req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));CommonResp<UserLoginResp> resp = new CommonResp<>();UserLoginResp userLoginResp = userService.login(req);// 登录成功后,生成单点登录token，并放入redis当中Long token = snowFlake.nextId();LOG.info("生成单点登录token，{}，并放入redis", token);userLoginResp.setToken(token.toString());redisTemplate.opsForValue().set(token, JSONObject.toJSONString(userLoginResp),3600*24, TimeUnit.SECONDS);resp.setContent(userLoginResp);return resp;}
2. 前端保存信息
前端显示登录用户，header显示登录昵称，使用vuex+sessionStorage保存登录信息。
前端登录成功后，拿到后端返回的用户信息还有token，要进行持久化存储，使用到vuex和sessionStorage，所以我们前端拿到数据后，就要进行向vuex和sessionStorage当中存储的工作：
// 登录const login = () => {console.log("开始登录");loginModalLoading.value = true;loginUser.value.password = hexMd5(loginUser.value.password + KEY);axios.post('/user/login', loginUser.value).then((response) => {loginModalLoading.value = false;const data = response.data;if (data.success) {loginModalVisible.value = false;message.success("登录成功！");store.commit("setUser", data.content);} else {message.error(data.message);}});};
import { createStore } from 'vuex'declare let SessionStorage: any;const USER = "USER";const store = createStore({state: {user: SessionStorage.get(USER) || {}},mutations: {setUser (state, user) {console.log("store user：", user);state.user = user;SessionStorage.set(USER, user);}},actions: {},modules: {}});export default store;
//sessionStorage只能存字符串，所以object这里我们做个封装SessionStorage = {get: function (key) {var v = sessionStorage.getItem(key);if (v && typeof(v) !== "undefined" && v !== "undefined") {return JSON.parse(v);}},set: function (key, data) {sessionStorage.setItem(key, JSON.stringify(data));},remove: function (key) {sessionStorage.removeItem(key);},clearAll: function () {sessionStorage.clear();}};
这样之后，前端任何页面任何组件内想要拿到用户信息都可以通过下面这种方式，在template当中就可以使用user了，比如user.name，user.id等等
setup() {const user = computed(() => store.state.user);return {user}}
✿后端接口增加登录校验
1. 后端增加拦截器校验token
后端是书写了一个拦截器，用来对需要进行登录校验的接口进行登录校验：
package com.taopoppy.wiki.interceptor;import com.alibaba.fastjson.JSON;import com.taopoppy.wiki.resp.UserLoginResp;import com.taopoppy.wiki.util.LoginUserContext;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.data.redis.core.RedisTemplate;import org.springframework.http.HttpStatus;import org.springframework.stereotype.Component;import org.springframework.web.servlet.HandlerInterceptor;import org.springframework.web.servlet.ModelAndView;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** 拦截器：Spring框架特有的，常用于登录校验，权限校验，请求日志打印*/@Componentpublic class LoginInterceptor implements HandlerInterceptor {private static final Logger LOG = LoggerFactory.getLogger(LoginInterceptor.class);@Resourceprivate RedisTemplate redisTemplate;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {// 打印请求信息LOG.info("------------- LoginInterceptor 开始 -------------");long startTime = System.currentTimeMillis();request.setAttribute("requestStartTime", startTime);// OPTIONS请求不做校验,// 前后端分离的架构, 前端会发一个OPTIONS请求先做预检, 对预检请求不做校验if(request.getMethod().toUpperCase().equals("OPTIONS")){return true;}String path = request.getRequestURL().toString();LOG.info("接口登录拦截：，path：{}", path);//获取header的token参数String token = request.getHeader("token");LOG.info("登录校验开始，token：{}", token);if (token == null || token.isEmpty()) {LOG.info( "token为空，请求被拦截" );response.setStatus(HttpStatus.UNAUTHORIZED.value());return false;}Object object = redisTemplate.opsForValue().get(token);if (object == null) {LOG.warn( "token无效，请求被拦截" );response.setStatus(HttpStatus.UNAUTHORIZED.value());return false;} else {LOG.info("已登录：{}", object);LoginUserContext.setUser(JSON.parseObject((String) object, UserLoginResp.class));return true;}}@Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {long startTime = (Long) request.getAttribute("requestStartTime");LOG.info("------------- LoginInterceptor 结束 耗时：{} ms -------------", System.currentTimeMillis() - startTime);}@Overridepublic void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {// LOG.info("LogInterceptor 结束");}}
写好的拦截器在config/SpringMvcConfig.java当中配置应用：
package com.taopoppy.wiki.config;import com.taopoppy.wiki.interceptor.LoginInterceptor;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.InterceptorRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import javax.annotation.Resource;@Configurationpublic class SpringMvcConfig implements WebMvcConfigurer {@ResourceLoginInterceptor loginInterceptor;public void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(loginInterceptor).addPathPatterns("/**").excludePathPatterns("/test/**","/redis/**","/user/login","/category/all","/ebook/list","/doc/all/**","/doc/vote/**","/doc/find-content/**","/ebook-snapshot/**");}}
还有一个文件，暂时不知道是什么功能：
package com.taopoppy.wiki.util;import com.taopoppy.wiki.resp.UserLoginResp;import java.io.Serializable;public class LoginUserContext implements Serializable {private static ThreadLocal<UserLoginResp> user = new ThreadLocal<>();public static UserLoginResp getUser() {return user.get();}public static void setUser(UserLoginResp user) {LoginUserContext.user.set(user);}}
2. 前端请求增加token参数
前端请求接口的时候，应该根据vuex当中的登录信息将token放在header当中一并传入后端：后端如果返回401这种未授予权限的状态码，就直接跳转到首页（这种情况多半出现在一个网页显示了很久，后端token在redis已经过期，然后再点击网页上某个按钮请求需要登录校验的接口，接口返回401，说明token过期，网页就跳转到首页或者登录页）
/*** axios拦截器*/axios.interceptors.request.use(function (config) {console.log('请求参数：', config);const token = store.state.user.token;if (Tool.isNotEmpty(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("setUser", {});message.error("未登录或登录超时");router.push('/');}return Promise.reject(error);});
✿前端界面增加登录校验
1. 未登录隐藏管理菜单
用户未登录的时候，管理菜单是不能显示的，登录之后才有权利查看电子书管理，用户管理。
<a-menu-item key="/admin/user" :style="user.id? {} : {display:'none'}"><router-link to="/admin/user">用户管理</router-link></a-menu-item><a-menu-item key="/admin/ebook" :style="user.id? {} : {display:'none'}"><router-link to="/admin/ebook">电子书管理</router-link></a-menu-item><a-menu-item key="/admin/category" :style="user.id? {} : {display:'none'}"><router-link to="/admin/category">分类管理</router-link></a-menu-item>
2. 对路由做判断，防止手敲url
在用户未登录的时候，从界面上看不到用户管理，电子书管理等tab入口，但是可以通过手敲url进入到管理页面，所以管理页面的路由需要对登录进行校验：
- 给需要登录校验的路由添加一个loginRequire为true的meta：
- 对loginRequire做判断，判断用户是否登录
```javascript
const routes: Array
= [ { path: ‘/admin/user’, name: ‘AdminUser’, component: AdminUser, meta: {
} }, { path: ‘/admin/ebook’, name: ‘AdminEbook’, component: AdminEbook, meta: {loginRequire: true
} }, { path: ‘/admin/category’, name: ‘AdminCategory’, component: AdminCategory, meta: {loginRequire: true
} }, { path: ‘/admin/doc’, name: ‘AdminDoc’, component: AdminDoc, meta: {loginRequire: true
} }, ]loginRequire: true
// 路由登录拦截 router.beforeEach((to, from, next) => { // 要不要对meta.loginRequire属性做监控拦截 if (to.matched.some(function (item) { console.log(item, “是否需要登录校验：”, item.meta.loginRequire); return item.meta.loginRequire })) { const loginUser = store.state.user; if (Tool.isEmpty(loginUser)) { console.log(“用户未登录！”); next(‘/‘); } else { next(); } } else { next(); } }); ``` 最后这里要强调一下：使用sessionStorage的原因是因为：sessionStorage的有效期和窗口或者浏览器的标签页是一样的，所以在同一个窗口通过route跳转，sessionStorage有效，但是如果关闭窗口，下一次手敲的话，新的窗口就没有sessionStorage。
总结图
若有收获，就点个赞吧
0 人点赞
