SpringBoot项目——jwt 登录验证与编写前后端分离API

SpringBoot项目——jwt 登录验证与编写前后端分离API

回顾：
SpringBoot项目——配置Mysql与session注册登录验证
SpringBoot项目——创建菜单与游戏页面
SpringBoot项目——配置git环境与项目创建

---

1. session 与 jwt 登录验证方式

1.1 传统的 session 登录验证过程：

---

登录时用户端输入用户名密码。后端将其传递过来与数据库进行比对，若比对一致则将sessionID发送给用户，用户将sessionID存到本地cookie，登录成功。
【后端存sessionID 与对应的用户信息】

未来用户访问授权页面时，都会自动将sessionID传递进去验证，后端验证sessionID是否有效。若验证有效后端会通过sessionId找到对应的User信息，提取到相应的API上下文中。
【一段时间内有效，过期需要再次登陆验证。】

（session登录验证实现代码）

劣势： 现在我们应用都是跨域的（本地当前域名访问域名不同的API），既有web端也会有app端，此时session验证方式若想实现用户以一个身份登录多个服务器，会将sessionID 复制多份放到多台服务器，会比较麻烦。

---

1.2 jwt 验证模式:

登录时客户端向服务器发送用户名和密码进行验证，session验证中用户登录之后要返给用户一个sessionid， 现在服务器只需要返给用户一个 jwt-token、不会存储到数据库里。

当客户端未来再访问服务器请求时，如果请求需要验证，则需要附加上jwt_token。服务器端可以验证jwt_token是否合法。若合法，根据token里的userid从数据库中提取信息。

优势： 很容易实现跨域；它不需要在服务器端存储，只需要获取一个令牌就可以登录多个服务。

如何验证jwt？
将用户信息info 加上密钥（服务器端独有）加密后生成签名，将info 与 签名 加入jwt-token传给用户。未来每次验证，用户发送info与签名。服务器将info+私所存钥经过加密算法后如果生成签名，则验证通过。

一般给用户传递两个token，access_token：有效时长较短，可设置几分钟。access_token：有效时长稍长，可为几周。验证登录时由于有是GET明文方式/能见的表头，因此安全起见→access_token。

2. 实现 jwt 登录验证方式

安装jwt依赖 jjwt-api、 jjwt-impl、jjwt-jackson。

实现utils.JwtUtil类，为jwt工具类，用来创建、解析 jwt_token
实现config.filter.JwtAuthenticationTokenFilter类，用来验证jwt token，如果验证成功，则将User信息注入上下文中
配置config.SecurityConfig类，放行/公开 登录、注册等接口

// utils.JwtUtil
//为jwt工具类，用来创建、解析 jwt_token
//作用是将我们的字符串加上密钥加上有效期变成一个加密后的字符串
//另外一个作用是给我们一个令牌让我们把她的有效期解析出来
package com.kob.backend.utils;

import ...

@Component
public class JwtUtil {
    
    
    // 有效期14天
    public static final long JWT_TTL = 60 * 60 * 1000L * 24 * 14;

    // 密钥，内容是随机字符串，长度必须足够长，只能是大小写英文和数字
    public static final String JWT_KEY = "SDFGjhdsfalshdfHFdsjkdsfds121232131afasdfac";

    //
    public static String getUUID() {
    
    
        return UUID.randomUUID().toString().replaceAll("-", "");
    }

    public static String createJWT(String subject) {
    
    
        JwtBuilder builder = getJwtBuilder(subject, null, getUUID());
        return builder.compact();
    }

    private static JwtBuilder getJwtBuilder(String subject, Long ttlMillis, String uuid) {
    
    
        SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
        SecretKey secretKey = generalKey();
        long nowMillis = System.currentTimeMillis();
        Date now = new Date(nowMillis);
        if (ttlMillis == null) {
    
    
            ttlMillis = JwtUtil.JWT_TTL;
        }

        long expMillis = nowMillis + ttlMillis;
        Date expDate = new Date(expMillis);
        return Jwts.builder()
                .setId(uuid)
                .setSubject(subject)
                .setIssuer("sg")
                .setIssuedAt(now)
                .signWith(signatureAlgorithm, secretKey)
                .setExpiration(expDate);
    }

    public static SecretKey generalKey() {
    
    
        byte[] encodeKey = Base64.getDecoder().decode(JwtUtil.JWT_KEY);
        return new SecretKeySpec(encodeKey, 0, encodeKey.length, "HmacSHA256");
    }

    public static Claims parseJWT(String jwt) throws Exception {
    
    
        SecretKey secretKey = generalKey();
        return Jwts.parserBuilder()
                .setSigningKey(secretKey)
                .build()
                .parseClaimsJws(jwt)
                .getBody();
    }
}

// config.filter.JwtAuthenticationTokenFilter
//用来验证jwt token，如果验证成功，则将User信息注入上下文中
//看token 是否合法，如果合法将user提取到上下文当中
package com.kob.backend.config.filter;

import ...

@Component
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {
    
    
    @Autowired
    private UserMapper userMapper;

    @Override
    protected void doFilterInternal(HttpServletRequest request, @NotNull HttpServletResponse response, @NotNull FilterChain filterChain) throws ServletException, IOException {
    
    
        String token = request.getHeader("Authorization");

        if (!StringUtils.hasText(token) || !token.startsWith("Bearer ")) {
    
    
            filterChain.doFilter(request, response);
            return;
        }

        token = token.substring(7);

        String userid;
        try {
    
    
            Claims claims = JwtUtil.parseJWT(token);
            userid = claims.getSubject();
        } catch (Exception e) {
    
    
            throw new RuntimeException(e);
        }

        User user = userMapper.selectById(Integer.parseInt(userid));

        if (user == null) {
    
    
            throw new RuntimeException("用户名未登录");
        }

        UserDetailsImpl loginUser = new UserDetailsImpl(user);
        UsernamePasswordAuthenticationToken authenticationToken =
                new UsernamePasswordAuthenticationToken(loginUser, null, null);

        SecurityContextHolder.getContext().setAuthentication(authenticationToken);

        filterChain.doFilter(request, response);
    }
}

// config.SecurityConfig
// jwt验证中，放行或公开登录、注册等接口
// 这两个链接是公开的
// 创建后端api之前要对数据库进行修改
package com.kob.backend.config;
import ...

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    
    @Autowired
    private JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;

    @Bean
    public PasswordEncoder passwordEncoder() {
    
    
        return new BCryptPasswordEncoder();
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
    
    
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
    
    
        http.csrf().disable()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                // 放公开链接
                .antMatchers("/user/account/token/", "/user/account/register/").permitAll()
                .antMatchers(HttpMethod.OPTIONS).permitAll()
                .anyRequest().authenticated();

        http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

3. 编写后端 API

• 将数据库中的id域变为自增

  • 在数据库中将id列变为自增
  • 在pojo.User类中添加注解：@TableId(type = IdType.AUTO)

• 代码编写步骤

  • 在service里面写接口，在service的impl里面写接口的实现，
  • 编写controller用来调用service，controller里面调用接口，一般习惯所有的API返回一个Map
  • 前端调用controller中的API，完成相应操作。

• 实现API

  • 实现/user/account/token/（公开）：验证用户名密码，验证成功后返回jwt-token（令牌）
  • 实现/user/account/info/（权限）：若jwt-token获取成功，根据令牌获取当前用户信息
  • 实现/user/account/register/（公开）：注册账号

• 在前端代码中用ajex调试

• jwt解析网站

---

3.1 用户名密码验证 — 成功则返回 jwt-token

编写API：/user/account/token/

service层：

接口 LoginService

package com.kob.backend.service.user.account;

import java.util.Map;

public interface LoginService {
    
    
	// 传入用户名和密码，验证成功返回 success 与 编码后的 token
    public Map<String, String> getToken(String username, String password);

}

实现接口 LoginService，传入用户名和密码，验证成功返回 success 与 编码后的 token

package com.kob.backend.service.impl.user.account;

import ...
// 传入用户名和密码，验证成功返回 success 与 编码后的 token
@Service
public class LoginServiceImpl implements LoginService {
    
    

    @Autowired
    private AuthenticationManager authenticationManager;

    @Override
    public Map<String, String> getToken(String username, String password) {
    
    
        
        // 会将用户名和密码封装在此类中，不会存明文，存加密之后的信息
        UsernamePasswordAuthenticationToken authenticationToken =
                new UsernamePasswordAuthenticationToken(username, password);
        // 传入密文验证，如果登录失败会自动处理
        Authentication authenticate = authenticationManager.authenticate(authenticationToken);
        
        // UserDetail 这个接口代表了最详细的用户信息，若登录成功取出用户信息
        UserDetailsImpl  loginUser = (UserDetailsImpl) authenticate.getPrincipal();
        User user = loginUser.getUser();
        // 将用户id封装成jwt-token
        String jwt = JwtUtil.createJWT(user.getId().toString());

        //成功后定义返回结果
        Map<String, String> map = new HashMap<>();
        map.put("error_massage", "success");// 若成功返回success，所有数据放入error_massage这个变量。若失败自动处理。
        map.put("token",jwt);// jwt放入token这个变量

        return map;
    }
}

controller 层：

package com.kob.backend.controller.user.account;


import com.kob.backend.service.user.account.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class LoginController {
    
    
    @Autowired
    private LoginService loginService;

    // 方法作为 API 供前端调用使用
    @PostMapping("/user/account/token/")    // 写好记得将url放行，公开化
    public Map<String, String> getToken(@RequestParam Map<String, String> map) {
    
    
        String username = map.get("username");
        String password = map.get("password");
        return loginService.getToken(username,password);
    }
}

将 url 放行，公开
在前端代码中用ajex调试
由于后端所写为post方式，而直接打开链接http://127.0.0.1:3000/user/account/token/ 为get 方式，无法测试。

测试结果：

解析Jwt：

---

3.2 通过 jwt-token — 获取对应用户信息

编写API：/user/account/info/

service层：

// InfoService
package com.kob.backend.service.user.account;

import java.util.Map;

public interface InfoService {
    
    
    // 若jwt-token获取成功，根据token令牌获取当前用户信息
    public Map<String, String> getInfo();
}

// InfoServiceImpl
package com.kob.backend.service.impl.user.account;

import com.kob.backend.pojo.User;
import com.kob.backend.service.impl.utils.UserDetailsImpl;
import com.kob.backend.service.user.account.InfoService;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class InfoServiceImpl implements InfoService {
    
    
    @Override
    // 若jwt-token获取成功，根据token令牌获取当前用户信息
    public Map<String, String> getInfo() {
    
    
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();

        // UserDetail 这个接口代表了最详细的用户信息，登录成功后按照token取出用户信息
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        Map<String, String> map = new HashMap<>();
        map.put("error_massage","success");
        map.put("id", user.getId().toString());
        map.put("username", user.getPassword());
        map.put("photo", user.getPhoto());
        return map;
    }
}

controller 层

// InfoController
package com.kob.backend.controller.user.account;

import com.kob.backend.service.user.account.InfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class InfoController {
    
    
    @Autowired
    private InfoService infoService;

    @GetMapping("/user/account/info/")
    public Map<String, String> getInfo() {
    
    
        return infoService.getInfo();
    }

}

在前端代码中用ajex调试

测试结果：

3.3 实现注册账号

编写API：/user/account/register/
service层：

// RegisterService
package com.kob.backend.service.user.account;

import java.util.Map;

public interface RegisterService {
    
    
    public Map<String, String> register(String username, String password, String confirmedPassword);
}

// RegisterServiceImpl
package com.kob.backend.service.impl.user.account;

import...

@Service
public class RegisterServiceImpl implements RegisterService {
    
    
    @Autowired
    private UserMapper userMapper;// 操作数据库

    // 用于密码加密
    @Autowired
    private PasswordEncoder passwordEncoder;

    @Override
    public Map<String, String> register(String username, String password, String confirmedPassword) {
    
    
        // 判空
        Map<String, String> map = new HashMap<>();
        if (username == null) {
    
    
            map.put("error_message", "用户名不能为空。");
            return map;
        }
        if (password == null || confirmedPassword == null) {
    
    
            map.put("error_message", "密码不能为空。");
            return map;
        }

        // trim 删掉首位的空白字符判空
        username = username.trim();
        if (username.length() == 0) {
    
    
            map.put("error_message", "用户名不能为空");
            return map;
        }
        if (password.length() == 0 || confirmedPassword.length() == 0) {
    
    
            map.put("error_message", "密码不能为空。");
            return map;
        }

        // 长度
        if (username.length() > 100) {
    
    
            map.put("error_message", "用户名长度不能大于100");
            return map;
        }
        if (password.length() > 100 || confirmedPassword.length() >100) {
    
    
            map.put("error_message", "密码长度不能大于100");
            return map;
        }

        // 判两次密码一致
        if (!password.equals(confirmedPassword)) {
    
    
            map.put("error_message", "两次输入的密码不一致。");
            return map;
        }

        // 数据库中查询是否有用户名一致的 users
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",username);
        List<User> users = userMapper.selectList(queryWrapper);

        if(!users.isEmpty()) {
    
    
            map.put("error_massage","用户名已存在。");
            return map;
        }

        // 判断完合法给密码加密后，将所有信息传入数据库
        String encodedPassword = passwordEncoder.encode(password);
        String photo = "https://cdn.acwing.com/media/user/profile/photo/205751_lg_c639d8f515.jpg";
        User user = new User(null, username, encodedPassword, photo);
        userMapper.insert(user);
        map.put("error_massage","success");
        return map;

    }
}

controller 层：

package com.kob.backend.controller.user.account;

import com.kob.backend.service.user.account.RegisterService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class RegisterController {
    
    
    @Autowired
    private RegisterService registerService;

    @PostMapping("/user/account/register/")
    public Map<String, String> register(@RequestParam Map<String, String> map) {
    
    
        String username = map.get("username");
        String password = map.get("password");
        String confirmedPassword = map.get("confirmedPassword");
        return registerService.register(username, password, confirmedPassword);
    }
}

在前端代码中用ajex调试

测试结果：

以前数据库

注册后数据库

4. 前端采用 ajax 调用后端 API

前端采用 ajax调用后端所写 API实现前后端分离模式的jwt注册登录验证功能。

• 前端页面：Login 组件、Register组件路由跳转

UserAccountLoginView.vue

// UserAccountLoginView.vue
<template>
    <ContentField>
        <div class="row justify-content-md-center">
            <div class="col-3">
                <form action="">
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">用户名</label>
                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入用户名">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">密码</label>
                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入密码">
                    </div>
                    <button type="submit" class="btn btn-primary">登录</button>
                    <div class="error-message"></div>
                </form>
            </div>
        </div>
    </ContentField>
</template>

<script>
import ContentField from '@/components/ContentField.vue'

export default {
    
    
    name: 'UserAccountLoginView',
    components: {
    
    
        ContentField,
    },
    setup() {
    
            
    },
}
</script>

<style scoped>
button{
    
    
    width: 100%;
}
div.error-message{
    
    
    color: red;
}
</style>

UserAccountRegisterView.vue

// UserAccountRegisterView.vue
<template>
    <ContentField>
        <div>注册页面</div>
    </ContentField>
</template>

<script>
import ContentField from '@/components/ContentField.vue'

export default {
    
    
    name: 'UserAccountRegisterView',
    components: {
    
    
        ContentField,
    },
    setup() {
    
    
    },
}
</script>
<style scoped>
</style>

路由：

4.1 前端调用API (getToken、getInfo) — Login

store 中采用 ajax 调用后端API

store中：

组件调用 store 中所写ajax方法：

---

登录成功后验证token显示用户信息

Login组件中调用store中含有ajax的方法

退出操作清空jwt-token即可

目前token存在用户本地，若关闭浏览器或者刷新会使得token删除，从而取消登录状态到退出操作。后面实现将 token 存在local_storage，当关闭浏览器或者刷新时，不会取消登录状态。

4.2 前端调用API — Register