千峰商城-springboot项目搭建-72-用户未登录时添加购物车
1.增加状态码信息
ResStatus:
public class ResStatus { public static final int OK=10000; public static final int NO=10001; public static final int LOGIN_SUCCESS=2000;//认证成功 public static final int LOGIN_FAIL_NOT=20001;//用户未登录 public static final int LOGIN_FAIL_OVERDUE=20002;//用户登录失效 }
2.拦截器修改登录的状态:
CheckTokenInterceptor :
@Component public class CheckTokenInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String method = request.getMethod(); if ("OPTIONS".equalsIgnoreCase(method)){ return true;//收到试探数据则放行(三次握手中的第一次试探) } String token = request.getHeader("token"); //System.out.println("---------"+token); if (token == null) { ResultVO resultVO = new ResultVO(ResStatus.LOGIN_FAIL_NOT, "请先登录", null); //提示请先登录 doResponse(response,resultVO); return false; } else { try { //验证token JwtParser parser = Jwts.parser(); parser.setSigningKey("q666");//解析token时的SigningKey必须与设置token时设置的密码一致 //如果token正确(密码正确,有效期内)则正常执行,否则抛出异常 Jws<Claims> claimsJwt = parser.parseClaimsJws(token); return true; } catch (ExpiredJwtException e) { ResultVO resultVO = new ResultVO(ResStatus.LOGIN_FAIL_OVERDUE, "登陆过期", null); doResponse(response,resultVO); } catch (UnsupportedJwtException e) { ResultVO resultVO = new ResultVO(ResStatus.NO, "token不合法,自重哈", null); doResponse(response,resultVO); } catch (Exception e) { ResultVO resultVO = new ResultVO(ResStatus.LOGIN_FAIL_NOT, "请先登录", null); doResponse(response,resultVO); } return false; } } private void doResponse(HttpServletResponse response,ResultVO resultVO) throws IOException { response.setContentType("application/json"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String s = new ObjectMapper().writeValueAsString(resultVO); out.println(s); out.flush(); out.close(); } }
3.在详情页面判断如果用户未登录,则跳转登录页面
//添加购物车 var url5 = baseUrl+"shopcart/add" axios({ url:url5, method:"post", headers:{ token:token }, data: cart }).then((res)=>{ console.log(res); //处理添加购物车的回调 if(res.data.code == 10000){ //添加购物车成功! layer.msg("添加购物车成功!"); }else if(res.data.code == 10001){ //添加购物车失败! layer.msg("添加购物车失败!"); }else{ var str = ""; if(res.data.code == 20001){ str = "请先登录!"; }else if(res.data.code == 20002){ str = "登录过期,请重新登录!"; } var params = "tips="+str+"&returnUrl=introduction.html&pid=" +this.productId+"&sid="+this.currentSkuIndex+"&num="+this.num; var loginUrl = "login.html?"+params; //跳转到登录页面 window.location.href= encodeURI(loginUrl); } });
4.回到详情页时接收参数
data:{ isLogin:false, token:null, username:"", productId:"", product:{ productName:"", //让vue进行初次渲染时有数据显示 soldNum:0 }, productImgs:[], productSkus:[], currentSkuIndex:0, //当前选择的套餐的索引(默认为0) skuProps:{} , //相当于一个map,用于存放当前套餐的属性 productParams:{}, productCommonts:[], pageNum:1, limit:3, pageCount:0, count:0, commontsCountMap:{}, chooseSkuProps:{}, //用于记录选择的套餐属性 num:1 //用于记录用户购买/添加购物车的商品数量 }, created:function(){ //获取到url传递的商品id this.productId = getUrlParam("pid"); this.currentSkuIndex = getUrlParam("sid")!=null ? getUrlParam("sid"):0; this.num = getUrlParam("num")!=null ? getUrlParam("num"):1; this.token = getCookieValue("token"); if(this.token!=null && this.token!=""){ this.isLogin = true; this.username = getCookieValue("username"); }
5.添加购物车成功/失败提示(layui)
(1)引入layui:
<!-- 引入 layui.css --> <link href="//unpkg.com/layui@2.7.5/dist/css/layui.css" rel="stylesheet"> <!-- 引入 layui.js --> <script src="//unpkg.com/layui@2.7.5/dist/layui.js">
(2)声明弹窗组件
var layer;
layui.use('layer', function(){
layer = layui.layer;
});
6.添加到购物车成功或失败时,进行提示:
//添加购物车成功!
layer.msg("添加购物车成功!");