将Okta登录组件代码从Options API转换为Composition API(Script Setup)

你的代码无法运行核心原因是在Script Setup中不能使用this，同时缺少对Okta Widget实例的持久化保存，导致卸载时无法正确清理。以下是修正后的完整实现：

关键修正点 #

• 用ref保存Okta Widget实例，避免丢失引用
• 替换this.$auth为Vue 3的注入/组合式API获取方式（假设你使用的是@okta/vue-auth，需通过useAuth获取）
• 移除不必要的nextTick（onMounted钩子执行时DOM已完成挂载）
• 修复卸载钩子中未定义的oktaSignIn引用

完整代码 #

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import OktaSignIn from '@okta/okta-signin-widget'
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css'
import oktaConfig from 'src/oktaConfig'
import { useAuth } from '@okta/vue-auth' // 根据你的Okta Vue库调整导入

const auth = useAuth()
const widget = ref(null) // 用ref保存Widget实例

onMounted(() => {
  const { issuer, clientId, redirectUri, scopes } = oktaConfig.oidc

  // 初始化Okta登录组件
  widget.value = new OktaSignIn({
    clientId,
    redirectUri,
    logo: require('@/assets/img/SWEEPACHIM-WEBSITE-BLACK.png'),
    i18n: {
      en: {
        'primaryauth.title': 'Sign in to my Okta Sign-In Widget Vue.js app'
      }
    },
    authParams: {
      issuer,
      scopes
    }
  })

  // 处理原始跳转URI
  const originalUri = auth.getOriginalUri()
  if (!originalUri) {
    auth.setOriginalUri('/')
  }

  // 读取URL中的OTP和State参数
  const searchParams = new URL(window.location).searchParams
  widget.value.otp = searchParams.get('otp')
  widget.value.state = searchParams.get('state')

  // 渲染登录组件并处理登录回调
  widget.value.showSignInToGetTokens({
    el: '#okta-signin-container',
    scopes
  }).then(tokens => {
    auth.handleLoginRedirect(tokens)
  }).catch(err => {
    console.error('Okta登录失败:', err)
    throw err
  })
})

onUnmounted(() => {
  // 清理Widget实例
  if (widget.value) {
    widget.value.remove()
  }
})
</script>

<template>
  <!-- 确保模板中有对应的容器 -->
  <div id="okta-signin-container"></div>
</template>

额外说明 #

• 如果你没有使用@okta/vue-auth，而是通过全局挂载的$auth，可以改用inject获取：

  import { inject } from 'vue'
  const auth = inject('$auth')
  

• 确保你的模板中存在id="okta-signin-container"的DOM元素，否则Widget无法渲染
• 建议将错误捕获改为更友好的用户提示，而不是直接抛出错误

内容的提问来源于stack exchange，提问作者Qiuzman