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();
    }
}

總結

在項目中遇到了不少跨域上的問題，自己在這方面也處理得不好，還是需要多總結、多思考！