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 '@/utils'
import { getTenantIdByNameApi, getUserInfoApi, loginApi } from '@/api/path'

const systemStore = useSystemStore()
const t = window['$t']

onMounted(async () => {
  const route = useRoute()
  const code = route.query.code
  if (!code) {
    return
  }
  var loginRes = await ssoLoginCallbackApi(code.toString())
  if (loginRes && loginRes.data) {
    // ① Token 信息（先存储下，保证可以加载个人信息）
    const tokenValue = loginRes.data.access_token
    const tokenName = 'Authorization'
    systemStore.setItem(SystemStoreEnum.TENANT_INFO, { tenantId: 1 })
    systemStore.setItem(SystemStoreEnum.USER_INFO, {
      [SystemStoreUserInfoEnum.USER_TOKEN]: tokenValue,
      [SystemStoreUserInfoEnum.TOKEN_NAME]: tokenName
    })
    // 个人信息
    const profileRes = await getUserInfoApi()
    const id = profileRes?.data?.id
    const username = profileRes?.data?.username
    const nickname = profileRes?.data?.nickname
    if (id && username && nickname) {
      // 存储到 pinia
      systemStore.setItem(SystemStoreEnum.USER_INFO, {
        [SystemStoreUserInfoEnum.USER_TOKEN]: tokenValue,
        [SystemStoreUserInfoEnum.TOKEN_NAME]: tokenName,
        [SystemStoreUserInfoEnum.USER_ID]: id,
        [SystemStoreUserInfoEnum.USER_NAME]: username,
        [SystemStoreUserInfoEnum.NICK_NAME]: nickname
      })
      window['$message'].success(t('login.login_success'))
      var sso_url = localStorage.getItem(StorageEnum.GO_SSO_URL)
      console.log('sso_url:' + sso_url)
      if (sso_url) {
        localStorage.removeItem(StorageEnum.GO_SSO_URL)
        window.location.href = sso_url
        return
      }
      routerTurnByName(sso_url || PageEnum.BASE_HOME_NAME, true)
      return
    }
    window['$message'].error('登陆失败：' + profileRes.msg)
    routerTurnByName(PageEnum.ERROR_PAGE_NAME_403, true)
  } else {
    window['$message'].success(loginRes.msg)
    window['$message'].error('登陆失败：' + loginRes.msg)
    routerTurnByName(PageEnum.BASE_LOGIN_NAME, true)
  }
})
</script>