📄 单点登录整合 ruoyi-vue
内部资料，请刷新扫码登录
pigcloud
# 环境说明
| 版本 | |
|---|---|
| 本章文档对应视频 | 单点登录整合 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 `pigxx`.`sys_oauth_client_details` (`id`, `client_id`, `resource_ids`, `client_secret`, `scope`, `authorized_grant_types`, `web_server_redirect_uri`, `authorities`, `access_token_validity`, `refresh_token_validity`, `additional_information`, `autoapprove`, `del_flag`, `create_by`, `update_by`, `create_time`, `update_time`, `tenant_id`) VALUES (10, 'ruoyi', NULL, 'ruoyi', 'server', 'password,refresh_token,authorization_code,client_credentials,mobile', 'http://127.0.0.1:1024/sso', NULL, 43200, 2592001, NULL, 'true', '0', ' ', ' ', NULL, NULL, 1);
# 3. 修改 RuoYi 后端信息
配置 ② RuoYi 前端地址 默认 1024 端口 配置 ③ PIGX 认证中心地址
# 4. 修改 RuoYi 前端配置
- 登录页面配置
- 退出页面配置
# 进阶：涉及 RuoYi 代码调整说明
注意：参考如下部分说明，阅读如上源码进行调整
# 1. 新增 spring security 新的认证模式
# 2. 配置 SecurityConfig 接管新的认证模式
# 3. 修改登录方法
SysLoginController.login() -> SysLoginService.loginBySSO()
# 4. 前端调整
新增 sso.vue ，页面跳转回调页面
router/index.js 维护 sso.vue
- 设置 sso.vue 回调不拦截
- 前端新增 loginBySSO API
- 登录页，增加 SSO 按钮
- 增加退出页面逻辑
