如何使用 Composition API 设置具有 Okta auth 的 Vue 应用程序

Question

我正在使用 Okta 设置一个基本的 Vue 身份验证应用程序，基于以下内容：https://github.com/okta/okta-vue。我正在尝试将处理路由和登录重定向的逻辑从选项 API 转换为组合 API。换句话说，App.vue 中的登录/注销功能，目前是这样写的：

    async login () {
      await this.$auth.signInWithRedirect()
      this.$router.push('/protected')
    },
    async logout () {
      await this.$auth.signOut()
    }

https://github.com/okta/okta-vue#show-login-and-logout-buttons

在 Composition API 中可能看起来像这样（我认为）：

    setup() {
      const router = useRouter()
      
      const login = () => {
        this.$auth.signInWithRedirect()
      }

      const logout = () => {
        this.$auth.signOut()
      }

      return {login, logout, router}
    }

但是，我不确定如何更改

this.$auth.signInWithRedirect()

和

this.$auth.signOut()

以使用 Composition API，因为 $auth 似乎不是可接受的属性。如何设置 Okta 方法

signInWithRedirect()

和

signOut()

来使用组合 API？我对 Typescript 中的 Composition API 和 Vue 很陌生。感谢反馈！

下面是其余代码：

应用程序.vue

<template>
  <div id="app">
    <button v-if='authState && authState.isAuthenticated' @click='logout' id='logout-button'> Logout </button>
    <button v-else @click='login' id='login-button'> Login </button>
    <router-view/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'app',
    setup() {
      const router = useRouter()
      
      const login = () => {
        this.$auth.signInWithRedirect()
        router.push('/protected')
      }

      const logout = () => {
        this.$auth.signOut()
      }

      return {login, logout, router}
    }
  
})
</script>

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { OktaAuth } from '@okta/okta-auth-js'
import OktaVue from '@okta/okta-vue'

const oktaAuth = new OktaAuth({
    issuer: 'https://{dev-id}.okta.com/oauth2/default',
    clientId: '{clientId}',
    redirectUri: 'http://localhost:8080/login/callback',
    scopes: ['openid', 'profile', 'email']
  })

  const app = createApp(App)
  app.use(OktaVue, { oktaAuth })
  app.use(router)
  app.mount('#app')

路由器/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { LoginCallback } from '@okta/okta-vue'
import { navigationGuard } from '@okta/okta-vue'
import Protected from '../views/Protected.vue'

const routes: Array<RouteRecordRaw> = [
  { 
    path: '/login/callback', 
    component: LoginCallback 
  },
  {
    path: '/protected',
    name: 'Protected',
    component: Protected,
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach(navigationGuard)

export default router

Answer 1

okta-vue

插件配置了一个名为$auth的

全局属性

（它允许在选项API中使用

this.$auth

）。该属性的 值实际上与通过

oktaAuth

传递到插件 的

app.use(OktaVue, { oktaAuth })

实例相同（即，

this.$auth

设置为

oktaAuth

）。

在 Composition API 中，您可以通过

getCurrentInstance()

访问应用程序的全局属性：

// MyComponent.vue
<script lang="ts">
import { getCurrentInstance } from 'vue'
import type { OktaAuth } from '@okta/okta-auth-js'

export default {
  setup() {
    const oktaAuth = getCurrentInstance()!!.appContext.app.config.globalProperties.$auth as OktaAuth
    const login = () => oktaAuth.signInWithRedirect()
    const logout = () => oktaAuth.signOut()
    ⋮
  }
}
</script>

另一种方法是将

oktaAuth

实例移动到可以在需要时导入的共享文件中，因为

oktaAuth

与

$auth

全局属性相同：

// auth.ts
import { OktaAuth } from '@okta/okta-auth-js'

export const oktaAuth = new OktaAuth({
  issuer: `https://${process.env.VUE_APP_OKTA_DOMAIN}/oauth2/default`,
  clientId: `${process.env.VUE_APP_OKTA_CLIENT_ID}`,
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email'],
  pkce: true,
})

// main.ts
import OktaVue from '@okta/okta-vue'
import { oktaAuth } from './auth' 👈

const app = createApp(App)
app.use(OktaVue, { oktaAuth })
⋮

// MyComponent.vue
<script lang="ts">
import { oktaAuth } from './auth' 👈

export default {
  setup() {
    const login = () => oktaAuth.signInWithRedirect()
    const logout = () => oktaAuth.signOut()
    ⋮
  }
}
</script>

演示

Answer 2

最新版本的

okta-vue

导出可组合的

useAuth

，您可以在组件中使用它。 https://github.com/okta/okta-vue?tab=readme-ov-file#auth

import { useAuth } from '@okta/okta-vue';
const $auth = useAuth();