Springboot3+vue3从0到1开发实战项目（二）

Dear 丶 2024-04-29 19:03 164阅读 0赞

前面完成了注册功能这次就来写登录功能， 还是按照这个方式来

![914613cb8f224067ae107e1acb62b13b.png][]

## 明确需求： 登录接口 ##

前置工作 ： 想象一下登录界面（随便在百度上找一张） 看前端的能力咋样了， 现在我们不管后端看要什么参数就好

![d7f86b6739814c49b43a0b3e71c65cdc.png][]

## 阅读接口文档 ##

![572c7f3afcb84f7ab252dc74af13d537.png][]

请求路径 请求方式 请求参数 响应数据

## 思路分析： ##

登录和注册是一个完整项目的必要功能，登录看接口文档给出的账号密码都需要进行校验，以及要想到在未登录的情况下能不能访问网页的其他页面并且查询到数据，所以这里要准备jwt做一个认证，登录成功后生成token，利用这个令牌才能访问其他页面

![4120d8c23def422ab25570bb7b88c230.png][]

## 准备开发 ##

首先导入jwt的maven依赖

<dependency>
    			<groupId>com.auth0</groupId>
    			<artifactId>java-jwt</artifactId>
    			<version>4.4.0</version>
    		</dependency>

包com.zhou.utils / JwtUtil.java 工具类

public class JwtUtil {
    
        private static final String KEY = "zhousir"; // 秘钥
    
        //接收业务数据,生成token并返回
        public static String genToken(Map<String, Object> claims) {
            // 生成token
            return JWT.create()
                    .withClaim("claims", claims)//  用户数据
                    .withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 ))
                    .sign(Algorithm.HMAC256(KEY));
        }
    
        //接收token,验证token,并返回业务数据
        public static Map<String, Object> parseToken(String token) {
            return JWT.require(Algorithm.HMAC256(KEY)) // 创建验证器
                    .build()
                    .verify(token) // 验证token
                    .getClaim("claims")// 获取载荷
                    .asMap();
        }
    
    }

验证令牌，验证token com.zhou.interceptors.LoginInterceptor

@Component
    public class LoginInterceptor implements HandlerInterceptor {
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
            return false;
            
        }
    }

拦截器com.zhou.config.WebConfig

登录注册接口放行

@Configuration
    public class WebConfig implements WebMvcConfigurer {
    
        @Autowired
        private LoginInterceptor loginInterceptor;
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
            //登录接口和注册接口不拦截
            registry.addInterceptor(loginInterceptor).excludePathPatterns("/user/login","/user/register");
        }
    }

接下来就是要写接口了,第一篇写过了

使用的是UserService中根据用户名查询用户的方法

然后UserServiceImpl实现方法

然后UserMapper里面写sql

在controller包中UserController创建登录接口

/**
         * 登录功能
         */
            @PostMapping("/login")
            public Result Login(@Pattern(regexp = "^\\${5,16}$") String username, @Pattern(regexp = "^\\${5,16}$") String password) {
                // 根据用户名查询User
                User loginUser = userService.findByUsername(username);
                if (loginUser == null) {
                    return Result.error(1,"用户名或密码错误！！！");
                }
                // 判断密码是否正确
                if (Md5Util.getMD5String(password).equals(loginUser.getPassword())){
                    // 登录成功
                    Map<String,Object> mapuer = new HashMap<>();
                    mapuer.put("id",loginUser.getId());
                    mapuer.put("username",loginUser.getUsername());
                    // 获取token
                    String token = JwtUtil.genToken(mapuer);
                    return Result.success(token,"登录成功");
                }
                return  Result.error(1,"用户名或密码错误！！！");
            }

## 测试 ##

![d16d3afcc2534fee9b57f7f176176e1d.png][]

![1f91857c7ff94f2c83897a1751f30777.png][]

## 结语： ##

后面就简单了就是常用的增删改查会用到ThreadLocal本地线程来存储数据，获取数据，也会用到redis

[914613cb8f224067ae107e1acb62b13b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0db031c0b6c8426ea485eb24a9e829ae.png
[d7f86b6739814c49b43a0b3e71c65cdc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/7105d6f364b44cd98aa07111f87849a2.png
[572c7f3afcb84f7ab252dc74af13d537.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/89bcc4b9bef44849927502d594d0ccaf.png
[4120d8c23def422ab25570bb7b88c230.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/309be0f54df3409e939fd7bb0dc846fe.png
[d16d3afcc2534fee9b57f7f176176e1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/56f679ab61ee47cdaf0aa53546378ee5.png
[1f91857c7ff94f2c83897a1751f30777.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/2bc8152364f64a2ebd184af40cf41fde.png