ruoyi-vue-pro 数据大屏纯前端单点登录方案
ruoyi-vue-pro 已集成数据大屏模块 go-view，支持通过拖拽生成精美的大屏应用。然而点击【报表管理->大屏设计】时仍需输入账号密码登录，体验不佳。ruoyi-vue-pro 已支持应用注册及 OAuth2 授权功能，以下介绍如何实现最后一公里的前端单点登录。
1. 在【三方授权->应用管理】中注册数据大屏应用 report
2. 改造 yudao-ui-go-view-master 项目支持断点登录
A) 新增 callback 组件
新增页面 src/views/sso/callback.vue，内容如下：
<template>
<!-- 登录 -->
<div></div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Router, useRoute } from 'vue-router'
import { ssoLoginCallbackApi } from '@/api/path'
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
import { SystemStoreUserInfoEnum, SystemStoreEnum } from '@/store/modules/systemStore/systemStore.d'
import { StorageEnum } from '@/enums/storageEnum'
import { PageEnum, PreviewEnum } from '@/enums/pageEnum'
import { routerTurnByName } from
{ getTenantIdByNameApi, getUserInfoApi, loginApi }
systemStore = ()
t = []
( () => {
route = ()
code = route..
(!code) {
}
loginRes = (code.())
(loginRes && loginRes.) {
tokenValue = loginRes..
tokenName =
systemStore.(., { : })
systemStore.(., {
[.]: tokenValue,
[.]: tokenName
})
profileRes = ()
id = profileRes?.?.
username = profileRes?.?.
nickname = profileRes?.?.
(id && username && nickname) {
systemStore.(., {
[.]: tokenValue,
[.]: tokenName,
[.]: id,
[.]: username,
[.]: nickname
})
[].(())
sso_url = .(.)
.( + sso_url)
(sso_url) {
.(.)
.. = sso_url
}
(sso_url || ., )
}
[].( + profileRes.)
(., )
} {
[].(loginRes.)
[].( + loginRes.)
(., )
}
})
