ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue项目中配置全局axios信息。并使用axios发起哀求携带token信息，后端Filt [打印本页]
作者: 嚴華    时间: 2024-8-27 21:16
标题: Vue项目中配置全局axios信息。并使用axios发起哀求携带token信息，后端Filt
首先在Vue项目中配置全局axios信息，在src下新建axios文件夹，里边建一个index.js文件

 我的jwt信息存储在sessionStorage，直接从sessionStorage存储里边去取，配置axios信息并导出：
  1. import axios from "axios";
  2. var config={
  3.     //配置请求地址
  4.     baseURL:"http://localhost:8081/",
  5.     //配置超时信息
  6.     timeout:10000,
  7. }
  8. //创建axios实例
  9. var instance = axios.create(config);
  10. //配置拦截器信息
  11. instance.interceptors.request.use((config)=>{
  12.     //获取token信息
  13.     const token=JSON.parse(sessionStorage.getItem('token')).msg
  14.     //设置请求头token信息
  15.     if(token){
  16.         config.headers.token = token;
  17.     }
  18.     return config
  19. },(error)=>{
  20.     return Promise.reject(error);
  21. })
  22. instance.interceptors.response.use((response)=>{
  23.     //处理响应结果response
  24.     console.log(response);
  25. })
  26. export default instance
复制代码
在main.js文件里边配置全局使用：


 在项目中使用配置好的axios，使用this.$axios来调用，全局配置好的信息不用再去配置，如果要重新配置，可以导入没配置的axios去使用，使用方式：导入源axios，正常使用：

这样哀求时就会在哀求头上加上token信息 

后端SpringBoot项目配置Filter信息：
新建一个类去实现Filter接口并重写里边的三个方法（doFilter方法必须实现，其他两个可以不用，有默认实现），留意：SpringBoot3版本以上的导入的是jakarta.servlet下的Filter

配置拦截器：
1：在类名上添加注解@WebFilter(“  ”),常用参数说明：
/*:通配符，即拦截所有哀求
指定拦截哀求路径(如拦截data)：/data
指定拦截目次，拦截data开头的所有哀求：/data/*
2：在SpringBoot启动类上添加注解@ServletComponentScan，扫描Servlet包

具体拦截方式：
  1. @Override
  2.         public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  3.                         log.info("拦截到了数据");
  4.                         //请求信息
  5.                 HttpServletRequest request=(HttpServletRequest)  servletRequest;
  6.                 //响应信息
  7.                 HttpServletResponse response=(HttpServletResponse) servletResponse;
  8.                 //获取请求路径
  9.                 String url = request.getRequestURI();
  10.                 log.info("请求路径：{}",url);
  11.                 //判断请求路径是否需要拦截
  12.                 if (url.contains("login")||url.contains("register")||url.contains("returnpsd")){
  13.                         log.info("可以放行");
  14.                         filterChain.doFilter(servletRequest,servletResponse);
  15.                         return;
  16.                 }
  18.                 //执行到这里，说明需要拦截请求，获取请求头中的jwt信息进行校验
  19.                 String token = request.getHeader("token");
  20.                         log.info("token-->:{}",token);
  22.                 //判断jwt信息是否有长度
  23.                         if (!StringUtils.hasLength(token)){
  24.                                 Result notLogin = Result.error("请重新登录");
  25.                                 //转为json格式
  26.                                 String jsonString = JSONObject.toJSONString(notLogin);
  27.                                 //响应信息给前端
  28.                                 response.getWriter().write(jsonString);
  29.                                 return;
  30.                         }
复制代码
若jwt有效则放行去访问资源

生成jwt令牌可以去看我之前写的一篇文章：使用Hutool包下的JWTUtil工具类来生成和剖析JWT令牌-CSDN博客文章浏览阅读567次。上面的jwt.setkey(key.getBytes()).verify()方法通过传入令牌的签名秘钥并对给定的令牌的签名秘钥进行同等性校验。最近在做jwt令牌校验的时间发现了hutool包也对jwt做了相应的工具类 ，昨天摸索了一下午也是简朴使用了一下。在生成JWt令牌时这里我没有指定签名算法，默认使用的HS256签名算法。
https://blog.csdn.net/2301_78755150/article/details/140753623

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4