在前后端完全分离的情况下,前端项目中实现token验证大致思路如下:
1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码
2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
3、前端拿到token,将token存储到localStorage和前端中,并跳转路由页面
4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
5、每次调后端接口,都要在请求头中加token
6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面
后端代码实例
/*返回登录状态*/
@Data
public class Meta {
private String msg;
private Integer status;
}
/*
* 登录返回值,返给前端token和其他数据
* */
@Data
public class UserAuthExe {
private String token;
private String acccount;
private String userName;
private Meta meta;
}
import lombok.Data;
@Data
public class UserAuth {//实体类
private Long id;
private String password;
private String userName;
}
import com.baomidou.mybatisplus.annotation.EnumValue;
import lombok.AllArgsConstructor;
import lombok.Getter;
/**
* 登录状态枚举
* @author
*/
@AllArgsConstructor
public enum UserAuthEnum {
ACCOUNT_NONE("账户不存在",0),
SUCCESS("成功",1),
PWD_ERROR("密码错误",2);
@Getter
@EnumValue
private final String stateInfo;
@Getter
@EnumValue
private final int state;
}
创建工具类
**JwtUtil **
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.Claim;
import com.auth0.jwt.interfaces.DecodedJWT;