前端——》vue访问后台接口时的一些坑

情况是这样的。

后台springboot的接口是用shiro权限进行管理的。我想在登录的时候24小时内记住密码自动登录。shiro是提供了rememberMe的记住密码管理器来帮助我们实现自动登录。

先说第一个坑。跨域，这没什么好说的，这也不算特坑，按照如下配置即可。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允许任何的head头部
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允许任何的请求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter拦截器，对任意的请求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

再说第一个坑，这是个巨坑。请求携带cookie

我在ShiroConfig中注入了CookieRememberMeManager记住密码管理器，在这个过程中记住密码管理器会创建一个名为rememberMe的cookie，并且我设置了这个cookie的maxAge为一天，同时在登录new UsernamePasswordToken(username, password, true)的时候，把第三个参数即是否自动登录改成了true。按照以往使用layui的尿性，此时登录后系统就会在前端创建创建两个参数，一个叫JSESSIONID，一个叫rememberMe。如下：

但是在我的vue登录界面登录成功后，

出现了以下几个问题：

1：cookie中没有这俩参数。

2：于此同时在进行权限认证的时候，系统只走了ShiroRealm的登录身份认证接口，没有走权限认证接口。WTF?（太气愤自己找了好半天才找到原因）

3：打开谷歌的开发者调试模式的network发现请求中没有Cookie（这是最要命的一点）。

那么原因是什么呢。

是axios请求默认没有携带Cookie。需要我手动开启。要设置withCredentials这个属性等于true就好了，一个属性解决了三个问题。如下

（补充一点，图上axios拦截了请求头并设置了一个名叫Authorization的header，这跟shiro没关系。这是我在swagger中设置了token拦截验证，在前面swagger相关的博客中好像有说明）

再说第三个坑。传x-www-form-urlencoded格式的数据

在上面一张图上，我在拦截器中设置了content-type:'application/json'。

但是实际上没起到什么作用。我把这个拦截器中的content-type去掉后还是默认json格式的请求。

当然绝大多数请求都是json格式的是没有问题的，但我有一个post接口的后端是通过@ModelAttribute 这个注解绑定的参数。默认json格式的就导致我取不到这个参数，此时需要把request请求的格式改为application/x-www-form-urlencoded才行

但怎么改呢，就是在data中将原本要传给后台的参数对象product通过new URLSearchParams(product)包装一下就可以了。

前端——》vue访问后台接口时的一些坑

猜你喜欢