如何将 okta-vue 与 VueCLI4 集成

Question

我正在尝试使用 Okta-Vue 包设置基本的 Vue 身份验证页面。我引用的教程在这里：https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node。对于这个项目，我使用的是 VueCLI 4。创建项目后，我尝试在路由器文件中设置 Okta 身份验证协议

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import PostsManager from '@/components/PostsManager'
import OktaVue, { LoginCallback } from '@okta/okta-vue'
import { OktaAuth } from '@okta/okta-auth-js'

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 routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login/callback',
    component: LoginCallback
  },
  {
    path: '/posts-manager',
    name: 'PostsManager',
    component: PostsManager,
    meta: {
      requiresAuth: true
    }
  }
]

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

export default router

设置此演示的说明似乎是基于旧版本的 VueCLI，需要将 Vue 导入到路由器文件中，以便执行以下操作：

Vue.use(OktaVue, { oktaAuth })

由于 Vue.use() 不是新版本 vue-router 的一部分，在上述路由器文件中执行 OktaVue 和 oktaAuth 的正确方法是什么？

Answer 1

在Vue 3中，插件从createApp()和app.use()注册到应用程序实例上，相当于Vue 2的Vue.use():

// router.js
import { createRouter } from 'vue-router'

const router = createRouter(⋯)
export default router

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

export const oktaAuth = new OktaAuth(⋯)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

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

如何将 okta-vue 与 VueCLI4 集成

How to integrate okta-vue with VueCLI4

vue.js

okta

okta-api

vue-cli

vuejs3