在前面的几篇博文中我对 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 groupIdcn.iocoder.boot/groupId artifactIdyudao-module-sso/artifactId version${revision}/version /dependency完整的依赖配置如下dependencies dependency groupIdcn.iocoder.boot/groupId artifactIdyudao-module-sso/artifactId version${revision}/version /dependency dependency groupIdcn.iocoder.boot/groupId artifactIdyudao-module-infra-biz/artifactId version${revision}/version /dependency dependency groupIdcn.iocoder.boot/groupId artifactIdyudao-module-system-biz/artifactId version${revision}/version /dependency dependency groupIdcn.iocoder.boot/groupId artifactIdyudao-module-report-biz/artifactId version${revision}/version /dependency /dependencies2、在后台application.yaml文件配置 SSO1放行 sso 路由及租户免验证在yudao-module-report-app\src\main\resources\application.yaml文件中增加配置放行 sso 路由yudao. security: permit-all_urls:- /admin-api/sso/** #oauth2-clienttenant: # 多租户相关配置项 enable: true ignore-urls:- /admin-api/sso/login-by-codeyudao: 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授权码模式对应 code2简化模式对应 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 及对应的前端。浏览器中输入要访问的页面地址加参数ssotrue就进入授权界面授权完成即展示输入的地址界面。例如输入 http://localhost:3000/project/items?ssotrue会进入server登陆或进入如下授权页面。只要选择第一项被选择点击同意即可访问如下页面 如果我的博文对您有帮助请别忘了点赞收藏关注谢谢 您的关注和鼓励是我继续努力的动力源泉
