1。先创建好生产token与解析token的utils(后端)
public class JwuUtils {
public static final long EXPIRE = 1000 * 60 * 60 * 24;
public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";
public static String getJwtToken(String id, String nickname){
String JwtToken = Jwts.builder()
.setHeaderParam("typ", "JWT")
.setHeaderParam("alg", "HS256")
.setSubject("guli-user")
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
.claim("id", id)
.claim("nickname", nickname)
.signWith(SignatureAlgorithm.HS256, APP_SECRET)
.compact();
return JwtToken;
}
/**
* 判断token是否存在与有效
* @param jwtToken
* @return
*/
public static boolean checkToken(String jwtToken) {
if(StringUtils.isEmpty(jwtToken)) return false;
try {
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
/**
* 判断requesty请求中的token是否存在与有效
* @param request
* @return
*/
public static boolean checkToken(HttpServletRequest request) {
try {
String jwtToken = request.getHeader("token");
if(StringUtils.isEmpty(jwtToken)) return false;
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
/**
* 根据token获取会员id
* @param request
* @return
*/
public static String getMemberIdByJwtToken(HttpServletRequest request) {
String jwtToken = request.getHeader("token");
if(StringUtils.isEmpty(jwtToken)) return "";
Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
Claims claims = claimsJws.getBody();
return (String)claims.get("id");
}
}
2.登录,并且返回token(后端)
token里面包含了(从数据库查到的一些数据)
登录会受到的参数
@Data
@ApiModel(value="登录对象", description="登录对象")
public class LoginVo {
@ApiModelProperty(value = "手机号")
private String mobile;
@ApiModelProperty(value = "密码")
private String password;
}
处理登录的接口
@PostMapping("login")
public R loginUser(@RequestBody LoginVo loginVo) {
// 使用service实现登录,返回token值(jwt生成)
String token = memberService.login(loginVo);
return R.ok().data("token", token);
}
处理登录接口的逻辑
@Override
public String login(LoginVo loginVo) {
String mobile = loginVo.getMobile();
String password = loginVo.getPassword();
//校验参数
if(StringUtils.isEmpty(mobile) ||
StringUtils.isEmpty(password)) {
throw new GuliException(20001,"error");
}
//获取会员(根据手机号)
UcenterMember member = baseMapper.selectOne(new QueryWrapper<UcenterMember>().eq("mobile", mobile));
if(null == member) {
throw new GuliException(20001,"error");
}
//校验密码
if(!DigestUtil.md5Hex(password).equals(member.getPassword())) {
throw new GuliException(20001,"error");
}
//校验是否被禁用
if(member.getIsDisabled()) {
throw new GuliException(20001, "error");
}
//使用JWT生成token字符串[包含从数据库查出来的id和用户名]
String token = JwuUtils.getJwtToken(member.getId(), member.getNickname());
return token;
}
3.根据获取的token检验是否数据库有相应的信息,并且返回给前台(后端)
// 根据token获取用户信息
@GetMapping("getMemberInfo")
public R getMemberInfo(HttpServletRequest request) {
// 调用jwt工具类方法,根据request对象,获取头信息,返回用户id
String memberId = JwuUtils.getMemberIdByJwtToken(request);
// 查询数据库,根据用户id,获取用户信息
UcenterMember member = memberService.getById(memberId);
return R.ok().data("userInfo", member);
}
1.登录逻辑(前台)
这里操作cookie需要先导入
npm install js-cookie
// 登录
submitLogin() {
// 1. 调用接口进行登录,返回token字符串
loginApi.submitLogin(this.user)
.then(response => {
// console.log("1111111");
// 2. 把获取的token放入cookie
// 参数:cookie名称、cookie值、作用范围
cookie.set('guli_token', response.data.data.token, { domain: 'localhost' });
// 3. 创建前端拦截器 utils/request
// 4. (在访问下面这个接口的时候cookie就已经带token了)根据token获取用户信息
loginApi.getLoginInfo()
.then(response => {
console.log(response);
this.loginInfo = response.data.data.userInfo;
// 将获取到的用户信息放入cookie
cookie.set('guli_ucenter', JSON.stringify(this.loginInfo), { domain: 'localhost' })
});
// console.log("zzz")
// 跳转页面
// window.location.href = '/'
this.$router.push({ path: '/' })
// 5.页面显示 default.vue
})
},