vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token

一、前端：

1、在封装好的axios接口：

 

import axios from 'axios'

axios.defaults.withCredentials = true;// 允许跨域携带cookie

// 创建axios实例
const request = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
        baseURL: 'http://localhost:8088/zupu',
        // 超时取消
        timeout: 5000,
        // 设置Content-Type，规定了前后端的交互使用json
        // headers: {'Content-Type': 'application/json;charset=utf-8'}
})
export default request

2、在子文件中写接口请求配置

import request from "@/api";

let token=window.localStorage.getItem("zupu-token")
// 动态发布，上传图片
export function insetDyMyImg(datas) {
    return request({
        url: '/inset/file',
        method: 'post',
        data: datas,
		params: {
		    token: token,
		},
		headers: { 'Content-Type': 'multipart/form-data' }
    })
}

3、.vue文件中调用接口：

（1）引入接口：

import {insetDyMyImg} from '@/api/dynamic/dymy'

（2）调用接口：

let formdata = new FormData();
formdata.append("fileimg", file);
insetDyMyImg({
fileimg:file
}).then( res => {
	console.log(res.data)
}).catch( err => {
	console.log(err)
})

二、SprinBoot后端

拦截器：

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        response.setContentType("text/html;charset=utf-8");    //包含第一种方式的两个功能
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");

        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-            Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-    Type, Accept,Access-Token

    String token = request.getParameter("token");
    System.out.println("拦截器=》用户提交koken："+token);
    //判断token是否存在
    if(redisUtil.hasKey(token)) {
       System.out.println("拦截器=》用户提交koken："+token);
       return true;
    }
    request.getReader();
    System.out.println("拦截器=》token不通过!");
    returnData(response,2000,"您长时间未操作，请重新登录");
    return false;
}