如何使用Okta auth和Composition API设置Vue应用程序

Question

我正在使用Okta设置一个基本的Vue身份验证应用程序，基于以下内容：https://github.com/okta/okta-vue.我试图将处理路由和登录重定向的逻辑从Options API转换为Composition API。换句话说，应用程序中的登录/注销功能。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}
    }

然而，我不知道如何改变这一点$啊。登录WithRedirect（）$啊。signOut（）使用Composition API，因为$auth似乎不是可接受的属性。如何设置Okta方法signInWithRedirect（）和signOut（）来使用composition API？我不熟悉Typescript中的合成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')

路由器/索引。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