在上次前后端交互，我们使用的是最基本的HTML+Servlet的组合，比较基础，今天我们来讲一讲Html+Springboot框架，前后端交互实现更为简便，大大降低了我们开发人员在代码上面所花费的时间，那今天让我们一探究竟吧。
1.添加路由守卫
在前端我们在index.js中添加了路由守卫
在网址中直接去http://localhost:8081/#/main
由于路由守卫，我们不能直接进入main页面中，自动给我们跳转到登录页面中
2.验证token
添加token一块有4步：
- 登录成功后，后端生成token
- 前端接收，并保存
- 前端拦截器向后端发送
- 后端拦截器验证token
1. 登录成功后，后端生成token
package com.ffyc.common;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Service;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Service
public class JWTUtil {
/**
* jwt 生成 token
*
* @param id
* @param account * @return
*/
public static String token(Integer id, String account) {
String token = "";
try {
//过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
Date expireDate = new Date(new Date().getTime() + 60 * 60 * 24 * 1000);//过期时间
//秘钥及加密算法 加盐
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
//设置头部信息
Map<String, Object> header = new HashMap<>();
header.put("typ", "JWT");//生成的类型
header.put("alg", "HS256");//加密算法
//携带 id，账号信息，生成签名
token = JWT.create()
.withHeader(header)//头部
.withClaim("id", id)//用户id
.withClaim("account", account)//用户账号
.withExpiresAt(expireDate)
.sign(algorithm);
} catch (Exception e) {
e.printStackTrace();
return null;
}
return token;
}
public static boolean verify(String token) {
try {
//验签
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
JWTVerifier verifier = JWT.require(algorithm).build();
DecodedJWT jwt = verifier.verify(token);
return true;
} catch (Exception e) {//当传过来的 token 如果有问题,抛出异常
return false;
}
}
/**
* 获得 token 中 playload 部分数据,按需使用
*
* @param token
* @return
*/
public static DecodedJWT getTokenInfo(String token) {
return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
}
}
将生成Token添加到admin对象中
2.前端接收，并保存
在main.js中添加验证token字段
3. 前端拦截器向后端发送
在main.js中添加
4.后端拦截器验证token
后端token拦截器：
package com.ffyc.common;
import com.fasterxml.jackson.databind.json.JsonMapper;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//Token 验证拦截器
public class Token implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
System.out.println("后端Token拦截器");
String adminToken=request.getHeader("token");
boolean res=JWTUtil.verify(adminToken);
if(!res){
CommonResult commonResult=new CommonResult(202,res,"token失效");
JsonMapper jsonMapper=new JsonMapper();
String json= jsonMapper.writeValueAsString(commonResult);
response.getWriter().print(json);
}
return res;
}
}
注册拦截器：
package com.ffyc.common;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;
@Configuration
public class WebConfig implements WebMvcConfigurer{
public void addInterceptors(InterceptorRegistry registry) {
InterceptorRegistration inter = registry.addInterceptor(new Token());
inter.addPathPatterns("/admin/**"); //管理员需要拦截过滤地址
inter.excludePathPatterns("/admin/loginCtl/login");//放行地址
//放行行前台首页,文章详细信息等地址
//inter.excludePathPatterns("/swagger*/**"); //放行swagger
//inter.excludePathPatterns("/v2/**");//放行swagger
//inter.excludePathPatterns("/webjars/**");//放行swagger
}
}
在网址中直接搜索127.0.0.1:8080/admin/loginCtl/test
拦截器会进行验证，没有Token,返回CommomResult
3.完成最基本的登录功能
3.1 dao层
在dao层创建接口
package com.ffyc.dao;
import com.ffyc.model.Admin;
import org.springframework.stereotype.Repository;
@Repository//使spring创建并管理对象
public interface LoginDao {
public Admin Login(Admin admin);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE
mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--接口的添加-->
<mapper namespace="com.ffyc.dao.LoginDao">
<select id="Login" resultType="Admin">
select * from admin where account=#{account} and password=#{password}
</select>
</mapper>3.2 model层
在model层创建admin类
package com.ffyc.model;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
@Component
@Data//lombok 可以自动创建get set方法
@Getter
@Setter
public class Admin {
private Integer id;
private String account;
private int password;
private String token;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public int getPassword() {
return password;
}
public void setPassword(int password) {
this.password = password;
}
public String getToken() {
return token;
}
public void setToken(String token) {
this.token = token;
}
}
3.2 service层
在service层写逻辑部分
package com.ffyc.service;
import com.ffyc.common.CommonResult;
import com.ffyc.common.JWTUtil;
import com.ffyc.dao.LoginDao;
import com.ffyc.model.Admin;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
@Transactional
public class LoginService {
@Autowired
LoginDao loginDao;
public Admin login(Admin admin){
Admin a = loginDao.Login(admin);
return a;
}
}
3.4 web层
package com.ffyc.web;
import com.ffyc.common.CommonResult;
import com.ffyc.common.JWTUtil;
import com.ffyc.model.Admin;
import com.ffyc.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping(path= "/admin/loginCtl")
public class Controller {
@Autowired
LoginService loginService;
@RequestMapping(path= "/login")
//后端可以接收前端提交的json数据，但是必须是对象接收，必须要在参数前面添加@RequestBody
public CommonResult login(@RequestBody Admin admin){
Admin a = loginService.login(admin);
CommonResult commonResult=null;
if(a!=null) {
a.setToken(JWTUtil.token(a.getId(),a.getAccount()));
commonResult = new CommonResult(200, a, "登录成功");//可以对创建方法进封装
}else{
commonResult = new CommonResult(201, a, "账号密码错误");//可以对创建方法进封装
}
return commonResult;
}
}
加这个标签之后，前端就不需要再添加JsonString的方法
4.配置application.yml
#配置内置服务器的端口号
server:
port: 8080
#spring相关的配置
spring:
#配置数据库的连接信息，生成默认的数据源对象，生成JdbcTemplate,事务管理功能进行初始化
datasource:
url: jdbc:mysql://127.0.0.1:3306/map?serverTimezone=Asia/Shanghai
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型，还需要创建其对象
initialSize: 5 #初始化时建立物理连接的个数 数据库连接池相关的配置
minIdle: 1 #最小连接池数量
maxActive: 20 #最大连接池数量
#mybatis配置 创建SqlsessionFactory
mybatis:
type-aliases-package: com.ffyc.model
mapper-locations: classpath:mappers/*Mappers.xml
configuration: #mybatis settings配置
map-underscore-to-camel-case: true
cache-enabled: true
