VueCLI 4环境下如何正确集成okta-vue配置路由认证

Vue 3 移除了全局Vue.use()的插件注册API，插件注册需要在应用实例上调用app.use()完成，且该逻辑不应该写在路由配置文件中，正确配置步骤如下：

• 调整路由配置文件
  路由文件仅保留路由定义、路由鉴权守卫逻辑，移除OktaVue插件注册相关代码，补充全局前置守卫处理需要认证的路由：

  // router/index.js
  import { createRouter, createWebHistory } from 'vue-router'
  import Home from '../views/Home.vue'
  import PostsManager from '@/components/PostsManager'
  import { LoginCallback } from '@okta/okta-vue'
  // 导入单独初始化的oktaAuth实例，避免重复实例化
  import { oktaAuth } from '@/auth'
  
  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
  })
  
  // 全局鉴权守卫
  router.beforeEach(async (to, from, next) => {
    const needAuth = to.matched.some(record => record.meta.requiresAuth)
    const isAuthed = await oktaAuth.isAuthenticated()
    if (needAuth && !isAuthed) {
      oktaAuth.setOriginalUri(to.fullPath)
      oktaAuth.loginRedirect()
      return
    }
    next()
  })
  
  export default router
  

• 新建独立认证配置文件
  为了避免路由文件和入口文件重复实例化OktaAuth导致状态异常，新建src/auth.js统一存放oktaAuth初始化逻辑：

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

• 在项目入口文件注册插件
  Vue 3的插件注册需要在main.js中创建应用实例后，调用app.use()完成OktaVue注册：

  // src/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'
  
  const app = createApp(App)
  // 注册OktaVue插件，传入初始化好的oktaAuth实例
  app.use(OktaVue, { oktaAuth })
  app.use(router)
  app.mount('#app')
  

注意：@okta/okta-vue v5+版本才原生支持Vue 3，如果安装后出现兼容性报错，先检查依赖版本，安装对应Vue3适配版本即可。

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