RuoYi-App后端实现RuoYi-Cloud支持（361）

在RuoYi-App项目中，通常会与RuoYi-Vue版本的后端服务进行对接，但如果想要切换到更灵活的微服务架构——RuoYi-Cloud，其实操作非常简单，只需要做一些小的修改，就能实现两者的完美对接。以下是具体的操作流程，确保你能够快速完成从单体应用到微服务架构的过渡。

1. 添加跨域支持：后端`RuoYi-Cloud`新增跨域配置类

微服务架构中，前后端分离通常需要处理跨域问题。为此，我们首先需要在RuoYi-Cloud后端新增一个跨域支持类CorsConfig.java。这个类将确保前端能够正常与各个微服务模块进行交互。

package com.ruoyi.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;

/**
 * 处理跨域请求的配置类
 * 
 * @author ruoyi
 */
@Configuration
public class CorsConfig
{
    // 设置允许的请求头，如果有自定义的header字段，请在此添加
    private static final String ALLOWED_HEADERS = "X-Requested-With, Content-Type, Authorization, credential, X-XSRF-TOKEN, token, Admin-Token, App-Token";
    private static final String ALLOWED_METHODS = "GET,POST,PUT,DELETE,OPTIONS,HEAD";
    private static final String ALLOWED_ORIGIN = "*";
    private static final String ALLOWED_EXPOSE = "*";
    private static final String MAX_AGE = "18000L";

    @Bean
    public WebFilter corsFilter()
    {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            // 检测是否为跨域请求
            if (CorsUtils.isCorsRequest(request))
            {
                ServerHttpResponse response = ctx.getResponse();
                HttpHeaders headers = response.getHeaders();
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
                headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
                headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE);
                headers.add("Access-Control-Max-Age", MAX_AGE);
                headers.add("Access-Control-Allow-Credentials", "true");
                // 对于OPTIONS请求，直接返回OK状态，不做进一步处理
                if (request.getMethod() == HttpMethod.OPTIONS)
                {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
}

这个配置类中，设置了允许的请求头、请求方法和跨域来源。通过这种方式，可以让前端在调用微服务时无缝跨域，确保数据的正常传输。

2. 修改前端API：调整`RuoYi-App`的`login.js`

在前端RuoYi-App中，部分接口需要进行一些小的修改，以便能够与微服务架构进行交互。我们将对登录、用户信息获取、登出、验证码获取这几个关键接口进行调整，修改后的代码如下：

import request from '@/utils/request'

// 登录接口
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/auth/login',  // 微服务的认证路径
    headers: {
      isToken: false  // 登录接口无需携带token
    },
    method: 'post',
    data: data
  })
}

// 获取用户详细信息
export function getInfo() {
  return request({
    url: '/system/user/getInfo',  // 获取用户信息的微服务路径
    method: 'get'
  })
}

// 登出接口
export function logout() {
  return request({
    url: '/auth/logout',  // 微服务登出接口
    method: 'delete'
  })
}

// 获取验证码
export function getCodeImg() {
  return request({
    url: '/code',  // 获取验证码接口
    headers: {
      isToken: false  // 无需token
    },
    method: 'get',
    timeout: 20000  // 设置超时时间
  })
}

在这里，最重要的是接口路径的调整。我们将路径指向了/auth/login等微服务路径，从而实现了与微服务后端的对接。

3. 修改前端状态管理：调整`user.js`中的`token`处理逻辑

在微服务架构中，登录成功后返回的token信息可能有所不同。在RuoYi-App中，我们需要修改store/modules/user.js文件中的token处理逻辑，将获取到的token信息进行适配。修改后的部分代码如下：

// 将 res.token 替换为 res.data.access_token
....
login(username, password, code, uuid).then(res => {
  setToken(res.data.access_token)  // 设置获取到的微服务token
  commit('SET_TOKEN', res.data.access_token)  // 更新Vuex中的token状态
  resolve()  // 登录成功的回调
})
....

这样做是因为RuoYi-Cloud返回的token字段名与单体应用中有所不同，我们需要从res.data.access_token中获取token，并将其存储到前端的状态管理中。

4. 完成微服务对接

经过上述步骤，RuoYi-App就能够顺利对接RuoYi-Cloud微服务后端了。这些接口基本与原有的RuoYi-Vue保持一致，所以前端与后端的交互方式没有太大差异。此外，微服务架构下的接口也具有较高的复用性，单体应用和微服务之间的切换非常方便，极大地提升了系统的灵活性与扩展性。

通过这些简单的修改，RuoYi-App不仅能够兼容单体应用架构，还能无缝切换至微服务架构，实现了RuoYi-Cloud的支持。这为开发者提供了更多的选择，无论是单体应用还是分布式微服务，系统都能保持高效运行。

开发喵星球