Vue + Springboot（拦截器配置）整合获取Token

一、后端配置拦截器

1.单独新建一个interceptor包用于存放拦截器

（名字不固定：你也可以叫filter。 存在同一包也就是为了清楚知道代码存在关联，没别意思）

2.在interceptor包下建一个 AuthConfig类 并实现WebMvcConfigurer

@Configuration
public class AuthConfig implements WebMvcConfigurer{
    //3.定义不拦截 [此处定义不拦截单指定接口两个]
    private static List<String> excludePathList = Arrays.asList("/liJ", "/liB");

    
    //2.引入另一个拦截类
    @Autowired
    private AuthInterceptor authInterceptor;


    //1.重写WebMvcConfigurer里边的addInterceptors方法
    @Override
    public void addInterceptors(InterceptorRegistry registry){
        //authInterceptor：另一个拦截类
        registry.addInterceptor(authInterceptor)
                //拦截（所有： "/**"）
                .addPathPatterns("/**")
                //不拦截（指定："接口"[->单指定<-]   或  "/a接口/**"[->所有a接口下所有<-]）
                .excludePathPatterns(excludePathList);
    }
}

3.在interceptor包下建一个 AuthInterceptor类 并实现WebMvcConfigurer

@Component
public class AuthInterceptor implements HandlerInterceptor {
    //1.重写HandlerInterceptor 中的 preHandle
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //3.如果前端拦截器成功拦截，会把请求头放入Header中，此时 request.getHeader("你设置的名称")就能看到
        String token = request.getHeader("token");

        //2.return true 放行。           return false 拦截  【想看能不能进入拦截可以把true 改为 false 进行查看页面是否拦截了】
        return true;
    }
}

=================================前后端分割线===============================

二、前端配置拦截器

1.这边在全局main.js进行了拦截器配置

//1.确保里边已经引入了 axios
import axios from "axios";


//2.拦截器
axios.interceptors.request.use(function (config){
  //在发送请求前做什么
  return config;
}),function (error){
  //对请求错误做什么
  return Promise.reject(error)
}

2.第一次npm引入

npm install @vueuse/integrations --save

npm install @vue/composition-api --save

3.第二个npm引入

 npm install universal-cookie --save

4.vue.config.js中进行配置

configureWebpack: {
    module:{
      rules:[{
        //匹配所有以 .mjs 结尾的文件
        test:/\.mjs$/,
        // 限定只在 node_modules 内查找
        include: /node_modules/,
        // 将这些 mjs 文件视为 JavaScript 文件进行处理
        type: "javascript/auto"
      }]
    },
  }

5.创建utils包并在里边新建token.js，token.js代码如下

// 引入下载好的useCookies
import {useCookies} from "@vueuse/integrations/useCookies";



const key = "admin-token"
const cookie = useCookies()

// 获取token
export function getToken(){
    return cookie.get(key)
}


// 设置token
export function setToken(token){
    return cookie.set(key, token)
}


// 清除token
export function removeToken(){
    return cookie.remove(key)
}

6.获取后端传来的加密token

<script>
//1.引入用到的setToken
import {setToken} from "../../utils/token";

//2.获取后端传来的加密token
this.$http.post('user', params).then(res => {
    //3.使用引入的token
    setToken(res.data.token)
}
</script>

7.【继续为】 全局axios配置拦截器（最后一步骤）

//确保里边已经引入了 axios
import axios from "axios";

//1.引入用到的包
import {getToken} from "./utils/token";


//拦截器
axios.interceptors.request.use(function (config){
    //2.此处的拦截器去拦截，获取刚刚放入的，getToken()
    const token = getToken();

    //3.对获取到的 token 进行塞入 Header 头部 【这样后端就能通过头部获取到token值了】
    config.headers.token = token;

    //在发送请求前做什么
    return config;
}),function (error){
    //对请求错误做什么
    return Promise.reject(error)
}