前后端分离传值问题

这段时间做了个前后端分离项目,涉及到各种各样的传值问题,记下

前端用的vue框架,没用组件,所以跳转基本上还是href形式

前端页面跳转

var url = "search.html?keyword="+this.keyword;	
window.location.href = encodeURI(url);

encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)。

携带参数跟之前一样,跳转页面接收参数

//1.获取从上个页面传递过来的参数
var keyword = getUrlParam("keyword");

前端页面传值到后端

1.url携带参数去后端

//前端
var url2 = baseUrl+"product/listbrands/"+this.categoryId;




//后端
@ApiOperation("根据类别查询此类别下的品牌")
    @GetMapping("/listbrands/{cid}")
    public ResultVO getBrandsByCategoryId(@PathVariable("cid") int cid){
        return productService.getBrands(cid);
    }

用@pathVariable接收url中的值

2前端params中的值传到后端

可以直接接收,但是要保持属性一致(单词一样),不然会报错,如果想不一样可以用注解

上面的@ApiImplicitParams是Swagger里面的,作用是描述接口作用

3 前端用headers传值

 后端用@RequestHeader接收

注意:@RequestBody是用来接收前端传过来的对象,要跟后端的对象保持一致,即里面的属性要一一对应

前后端分离意味着不在同一服务器,获取session_id的值就要变一下

一种方法是登录之后用map集合保存id,每次返回给后端时一起返回,然后再随着返回值返回给前端,保证session_id一致性

另外一种方法是用别人的工具-Jwt令牌

1 登录成功就保存该token

 2 在渲染之前得到token

 3 一般用header把token的值传到后端,(前面例子有写),后端跟据token判断用户有没有权限访问

4 后端实现

package com.qf.fmmallssm.utils;

import com.auth0.jwt.JWT;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qf.fmmallssm.vo.ResultStatus;
import com.qf.fmmallssm.vo.ResultVO;
import io.jsonwebtoken.*;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;


/**
 * @author: 玉米
 * @description
 * @date: 2022/3/17 10:24
 */
@Component
public class CheckToken implements HandlerInterceptor {

    public boolean PreHandle(HttpServletRequest request, HttpServletResponse response,Object handler) throws Exception{
        String method = request.getMethod();
        String token = request.getHeader("token");
        if(token==null){
            ResultVO resultVO = new ResultVO(ResultStatus.LOGIN_SUCCESS, "登录成功", null);
            doResponse(response,resultVO);
        }else {
           try {
               JwtParser parser = Jwts.parser();
               parser.setSigningKey("yumi666");
               Jws<Claims> claimsJws = parser.parseClaimsJws(token);
               return true;
           }catch (ExpiredJwtException
           e){
               ResultVO resultVO = new ResultVO(ResultStatus.LOGIN_FAIL_OVERDUE, "登录过期", null);
               doResponse(response,resultVO);
           }catch (UnsupportedJwtException un){
               ResultVO resultVO = new ResultVO(ResultStatus.LOGIN_FAIL_NOT, "登录错误", null);
               doResponse(response,resultVO);
           }catch (Exception ex){
               ResultVO resultVO = new ResultVO(ResultStatus.LOGIN_FAIL_NOT, "重新登录", null);
               doResponse(response,resultVO);
           }
        }
        return false;
    }

    private void doResponse(HttpServletResponse response, ResultVO resultVO) throws IOException {
        response.setContentType("application/json; charset=UTF-8");
        PrintWriter writer = response.getWriter();
        /**
         * ObjectMapper是Jackson库中主要用于读取和写入Json数据的类,
         * 能够很方便地将Java对象转为Json格式的数据,用于后端Servlet向AJAX传递Json数据,动态地将数据展示在页面上。
         */
        String string = new ObjectMapper().writeValueAsString(resultVO);
        writer.write(string);
        writer.flush();
        writer.close();
    }
}

 加密密码要保持一致

  @Override
    public ResultVO checklogin(String username, String password) {
        User user = userDao.findUserByname(username);
       String md5= MD5Utils.md5(password);
        if(md5.equals(user.getPassword())){
            JwtBuilder builder = Jwts.builder();
            HashMap<String, Object> map=new HashMap<>();
            map.put("key1","value1");

            map.put("key2","value2");
            //主题,token携带的参数
            String token=builder.setSubject(username)
                    //设置token生成时间
                    .setIssuedAt(new Date())
                    //设置用户id为token_id
                    .setId(user.getUserId() + "")
                    //map可以存放角色的权限信息
                    .setClaims(map)
                    //设置token过期时间
                    .setExpiration(new Date(System.currentTimeMillis() + 24 * 60 * 60 * 1000))
                    //设置加密方式及加密密码
                    .signWith(SignatureAlgorithm.HS256, "yumi666")
                    .compact();
            return new ResultVO(200,token,user);

        }
        return new ResultVO(400,"登录失败");
    }
}

package com.qf.fmmallssm.config;


import com.qf.fmmallssm.utils.CheckToken;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

    @Autowired
    private CheckToken checkTokenInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(checkTokenInterceptor)
                .addPathPatterns("/shopcart/**")
                .addPathPatterns("/order/**")
                .addPathPatterns("/useraddr/**")
                .addPathPatterns("/user/check");
    }
}

好像。。暂时。。没什么要补充的了,先这样吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值