前后端分离后端获取不到header解决方案

分手后的思念是犯贱 2023-09-24 14:44 70阅读 0赞

## 我的目的：除了登录的请求，其他的每次请求都通过设置Token到头标签（headers）里面，后端做拦截，判断Token是否合法，实现代码安全 ##

## 前端（Vue）：拦截除了登录的其他请求，把token信息放入头标签（headers）里面 ##

> 我这里只是把重要的逻辑放在里面，如果要看所有文件的话就太多了

// 在发送请求之前做一些事情
    service.interceptors.request.use(
        //请求
      config => {
        
    	// 登录的时候把token放入store.getters中，这里就是判断登录没有，如果登录了，那么把token取出来放入头标签中
        if (store.getters.token) {
        
          // ['token'] 是自定义的令牌
          // 放在头标签中，
          // 请根据实际情况修改它
          config.headers['token'] = getToken()
        }
        return config
      },
      error => {
        
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )

### 前端这边有个问题就是跨域的时候，会先传一个OPTIONS的请求，判断连接是否有效 ###

![在这里插入图片描述][19886c5c17044f26b96f5e2cf97a01ec.png]

### 而这个请求没什么用，使用我们设置的token里面根本就没有 ###

![在这里插入图片描述][f0838e9f15f3405cbbe2e6da2c1927c6.png]

### 在另一个请求里面我们可以看见我们写的token参数，所以我们的办法就是在他发送OPTIONS请求时，给他过滤掉，不用管这个请求的内容就行 ###

![在这里插入图片描述][2efdc3a8b8854fce84d4898aaea861fe.png]

## 后端：拦截器 ##

### 错误案例 ###

> 这个案例不要拿来用，这个是有问题的，我只是讲一下问题在哪

@Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        
            // 因为第一次请求是OPTIONS的请求,所以根本就没有token存在，如第二张图，所以token一直就拿不到
            String token = request.getHeader("token");
            
            // Auth0JwtUtils.verify(token)&&!Auth0JwtUtils.isExpired(token) 这两个是我写的验证token的方法，用的jwt，封装了一个工具类
            if (!Strings.isEmpty(token)&&Auth0JwtUtils.verify(token)&&!Auth0JwtUtils.isExpired(token)){
        
                return true;
            }else {
        
                request.setAttribute("code",50012);
                request.setAttribute("message","请重新登录");
                return false;
            }
        }

### 正确案例 ###

@Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        
            String token = "";
            // 如果是 OPTIONS 请求，我们就让他通过，不管他
            if (request.getMethod().equals("OPTIONS")) {
        
                response.setStatus(HttpServletResponse.SC_OK);
                return true;
            // 如果不是，我们就把token拿到，用来做判断
            }else {
        
                token = request.getHeader("token");
            }
            // Auth0JwtUtils.verify(token)&&!Auth0JwtUtils.isExpired(token) 这两个是我写的验证token的方法，用的jwt，封装了一个工具类
            if (!Strings.isEmpty(token)&&Auth0JwtUtils.verify(token)&&!Auth0JwtUtils.isExpired(token)){
        
                return true;
            }else {
        
                request.setAttribute("code",50012);
                request.setAttribute("message","请重新登录");
                return false;
            }
        }

## JWT学习：[JWT详解（文章内嵌jwt工具类）\_我认不到你的博客-CSDN博客][JWT_jwt_-CSDN] ##

[19886c5c17044f26b96f5e2cf97a01ec.png]: https://img-blog.csdnimg.cn/19886c5c17044f26b96f5e2cf97a01ec.png
[f0838e9f15f3405cbbe2e6da2c1927c6.png]: https://img-blog.csdnimg.cn/f0838e9f15f3405cbbe2e6da2c1927c6.png
[2efdc3a8b8854fce84d4898aaea861fe.png]: https://img-blog.csdnimg.cn/2efdc3a8b8854fce84d4898aaea861fe.png
[JWT_jwt_-CSDN]: https://blog.csdn.net/qq_57581439/article/details/127911393?spm=1001.2014.3001.5502