📄 单点登录整合 ruoyi-vue

环境说明

	版本
本章文档对应视频	单点登录整合 ruoyi
配套源码	https://github.com/pig-mesh/RuoYi-Vue (opens new window)
PIGX	5.4
ruoyi-vue	3.8.1

页面跳转示意

本质上是 OAuth2.0 授权码模式的应用，通过 PIGX sys_user 表完成登录认证的过程。请先学习 pigx 支持开放平台模式

运行示例项目

1. 下载并运行示例

git clone https://github.com/pig-mesh/RuoYi-Vue.git

2. 插入客户端

注意：此操作插入的数据是在 pigx 的数据库中执行

INSERT INTO `sys_oauth_client_details` VALUES (10, 'ruoyi', NULL, 'ruoyi', 'server', 'password,refresh_token,authorization_code,client_credentials,mobile', 'http://127.0.0.1:1024/sso', NULL, 0, 0, NULL, 'true', '0', ' ', ' ', NULL, NULL, 1);

3. 修改 RuoYi 后端信息

配置 ② RuoYi 前端地址 默认 1024 端口 配置 ③ PIGX 认证中心地址

4. 修改 RuoYi 前端配置

• 登录页面配置

• 退出页面配置

进阶：涉及 RuoYi 代码调整说明

注意：参考如下部分说明，阅读如上源码进行调整

1. 新增 spring security 新的认证模式

• SsoCodeAuthenticationToken.java (opens new window)

• SsoCodeAuthenticationProvider.java (opens new window)

2. 配置 SecurityConfig 接管新的认证模式

3. 修改登录方法

SysLoginController.login()  -> SysLoginService.loginBySSO()

4. 前端调整

• 新增 sso.vue ，页面跳转回调页面

• 源码参考：sso.vue (opens new window)

• router/index.js 维护 sso.vue

• 设置 sso.vue 回调不拦截

• 前端新增 loginBySSO API

• 登录页，增加 SSO 按钮

• 增加退出页面逻辑