ruoyi-vue-pro数据大屏优化——在yudao-module-report-app使用yudao-moudle-sso优化单点登录

在前面的几篇博文中，我对 ruoyi-vue-pro 做了几个关键优化和功能增强，这篇博文我将数据大屏应用改造成一个具在后端配置备单点登录应用以解决appSecret不安全的问题 ，同时也为yudao-moudle-sso模块提供一个在 ruoyi-vue-pro 框架下的最佳实践案例。

============= 相关博文 ============

ruoyi-vue-pro数据大屏------路由支持history，告别难看的hash路由

ruoyi-vue-pro数据大屏------单点登录，告别手输密码（适用于不带后端服务的情况）

ruoyi-vue-pro优化------如何将一个模块快速变成一个独立的应用进行开发，部署，管理

ruoyi-vue-pro增强------新增通用单点登录模块yudao-module-sso（下载链接在博文末尾）

ruoyi-vue-pro优化------让菜单支持多个参数，一键直达【经营分析】、【生产报表】、【销售报表】

ruoyi-vue-pro优化------模块单独打包，增量更新、部署，告别打包等待，上传等待，节省网络流量

============= 相关博文 ============

下面的操作基于以上博文的探讨后成果，如果有疑问可以参考博文或留言. 下面的操作基于以上博文的探讨后成果，如果有疑问可以参考博文或留言. 下面的操作基于以上博文的探讨后成果，如果有疑问可以参考博文或留言.

​

1、导入yudao-moudle-sso模块依赖

在 ruoyi-vue-pro\yudao-module-report\yudao-module-report-app\pom.xml 文件中增加yudao-moudle-sso模块依赖：

<dependency>
    <groupId>cn.iocoder.boot</groupId>
    <artifactId>yudao-module-sso</artifactId>
    <version>${revision}</version>
</dependency>

完整的依赖配置如下：

    <dependencies>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-sso</artifactId>
            <version>${revision}</version>
        </dependency>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-infra-biz</artifactId>
            <version>${revision}</version>
        </dependency>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-system-biz</artifactId>
            <version>${revision}</version>
        </dependency>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-report-biz</artifactId>
            <version>${revision}</version>
        </dependency>
    </dependencies>

2、在后台application.yaml文件配置 SSO

1）放行 sso 路由及租户免验证

在yudao-module-report-app\src\main\resources\application.yaml文件中增加配置放行 sso 路由：

yudao.
  security:
    permit-all_urls:

      - /admin-api/sso/\*\* #oauth2-client
  tenant: # 多租户相关配置项
    enable: true
    ignore-urls:
      - /admin-api/sso/login-by-code

yudao:
  info:
    version: 1.0.0
    base-package: cn.iocoder.yudao
  web:
    admin-ui:
      url: http://dashboard.yudao.iocoder.cn # Admin 管理后台 UI 的地址
  security:
    permit-all_urls:
      - /admin-api/sso/**        # oauth2-sso-client
      - /admin-api/mp/open/**    # 微信公众号开放平台，微信回调接口，不需要登录
  tenant: # 多租户相关配置项
    enable: true
    ignore-urls:
      - /admin-api/sso/login-by-code
      - /admin-api/system/tenant/get-id-by-name # 基于名字获取租户，不许带租户编号
      - /admin-api/system/tenant/get-by-website # 基于域名获取租户，不许带租户编号

2）配置SSO 服务器及账号

在文件yudao-module-report\yudao-module-report-app\src\main\resources\application-local.yaml中找到如下配置并增加 sso 配置，包括：oauth2-server、client-key、client-secret、tenant-id，这些信息都必须在【三方授权->应用管理】中注册数

# 芋道配置项，设置当前项目所有自定义的配置
yudao:
  captcha:
    enable: false # 本地环境，暂时关闭图片验证码，方便登录等接口的测试；
  security:
    mock-enable: true
  sso:
    oauth2-server: http://127.0.0.1:48080/admin-api/system/oauth2
    client-key: yudao-sso-demo-by-code
    client-secret: test
    tenant-id: 1
  xss:
    enable: false
    exclude-urls: # 如下两个 url，仅仅是为了演示，去掉配置也没关系
      - ${spring.boot.admin.context-path}/** # 不处理 Spring Boot Admin 的请求
      - ${management.endpoints.web.base-path}/** # 不处理 Actuator 的请求
  pay:

3、确认bean自动扫描加载配置

@SuppressWarnings("SpringComponentScan") // 忽略 IDEA 无法识别 ${doubleu.info.base-package}
@SpringBootApplication(scanBasePackages = {"${yudao.info.base-package}.module"})
public class ReportServerApplication {

    public static void main(String[] args) {

        SpringApplication.run(ReportServerApplication.class, args);

    }

}

4、大屏web端调整

基于上篇博文，这次需要调整的主要是ssoLoginCallbackApi 接口，这里我将callback_url等公共参数进行了提取处理，最终在src\api\path\system.api.ts中3个函数代码如下：

// * SSO登录
const oauth2_server = "https://192.168.1.222:80"
const callback_url = "http://localhost:3000/callback" // 必须与数据库里面的一样
const clientId = 'yudao-sso-demo-by-code';

export const ssoLogin = () => {
  const redirectUri = encodeURIComponent(callback_url); // 注意，需要使用 encodeURIComponent 编码地址
  const responseType = 'code'; // 1）授权码模式，对应 code；2）简化模式，对应 token
  window.location.href = oauth2_server +'/sso?client_id=' + clientId
    + '&redirect_uri=' + redirectUri
    + '&response_type=' + responseType;
}

// * SSO登录
export const ssoLoginCallbackApi = async (code: String) => {
  try {
    const url = "/sso/login-by-code?code=" + code  + '&redirectUri=' + callback_url;
    var res = await http(RequestHttpEnum.POST)<ProfileVO>(url)
    console.log(res)
    return res
  } catch (err) {
    httpErrorHandle()
  }
}


// 查询用户个人信息
export const getUserInfoApi = async () => {
  try {
    const res = await http(RequestHttpEnum.POST)<ProfileVO>('/sso/user')
    debugger
    return res
  } catch (err) {
    httpErrorHandle()
  }
}

5、测试联调

启动 oauth2授权服务器后端 YudaoServerApplication，数据大屏后端ReportServerApplication 及对应的前端。

浏览器中输入要访问的页面地址加参数sso=true就进入授权界面，授权完成即展示输入的地址界面。

例如输入： http://localhost:3000/project/items?sso=true会进入server登陆或进入如下授权页面。

​

只要选择第一项被选择，点击同意即可访问如下页面：

​

==========================================================

== 如果我的博文对您有帮助请别忘了点赞，收藏，关注，谢谢！ ==

== 您的关注和鼓励是我继续努力的动力源泉 ==

==========================================================