SpringCloud中gateway对用户身份拦截，Vue axios统一处理状态码出现跨域问题

前言

在项目中，我们很多时候都需要对用户身份进行判断，在用户身份无法被验证时，我们返回{status:401,msg:‘XXX’}等，如若能在axios处统一拦截处理，会方便许多；同样，如果在后台gateway处，也能提前对token进行统一验证，避免异常用户的异常访问。

正文

首先在Vue封装的axios工具类中，统一对axios进行拦截操作

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  if (response.data.status === 401) {
    Router.push('/login')
  }
  return response
}, function (error) {
  return Promise.reject(error)
})

此时，如若后退返回数据的status为401，直接跳转至登录页面。

接着，在后台Gateway层，需要添加一个过滤器，实现对token的验证
重点：返回status等信息时出现了跨域问题，需要对请求头进行处理，处理后再返回。

/**
 * @author Hpsyche
 */
public class TokenFilter implements GlobalFilter {
    @Override
    public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
		String token = exchange.getRequest().getQueryParams().getFirst("token");
		//token有误
	     if (StringUtils.isEmpty(token)) {
	         HttpHeaders headers = exchange.getResponse().getHeaders();
	         headers.set("Access-Control-Allow-Origin", exchange.getRequest().getHeaders().getOrigin());
	         headers.set("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
	         headers.set("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
	         headers.set("Access-Control-Allow-Credentials","true");
	         JSONObject message = new JSONObject();
	         message.put("status",401);
	         message.put("msg", "error");
	         byte[] bits = message.toJSONString().getBytes(StandardCharsets.UTF_8);
	         ServerHttpResponse response = exchange.getResponse();
	         DataBuffer buffer = response.bufferFactory().wrap(bits);
	         response.getHeaders().add("Content-Type", "text/plain;charset=UTF-8");
	         return response.writeWith(Mono.just(buffer));
	     }
	     //token无误，放行
	     return chain.filter();
    }
}

总结

在项目中遇到了不少跨域上的问题，自己在这方面也处理得不好，还是需要多总结、多思考！