如何使用 Vuetify 和 Vue Router 进行 okta 回调？

Question

我使用具有 Okta 登录名的 Vue 路由器将我的 Vuejs 项目转换为使用 Vuetify。但是，我的 Auth 组件无法接受来自 Okta 的回调响应。登录到 Okta 后，我在我的浏览器中看到这个 'http://localhost:8080/implicit/callback?code=SAiq23P9u6STxJKvij5frqzd6b4oNGNV1w6e5xi6oRo&state=BPCu2QkMZ57OR0NKDR25RA6UbEzb02Jd8g16zz8B7kdF487JyKQGonr56TwTxzQa#在集成 Vuetify 后，我的 Auth 组件似乎无法处理回调。

以下是我的 main.js 文件：

import Vue from 'vue'
import App from './App.vue'
import About from './About.vue'
import Home from './Home.vue'
import Applications from './Applications.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Auth from '@okta/okta-vue'
import VueRouter from 'vue-router'
import cors from 'cors'
import vuetify from './plugins/vuetify';

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/implicit/callback', component: Auth.handleCallback() },
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/applications', component: Applications },
  ]
})

Vue.use(Auth, {
  issuer: 'https://dev-REDACTED.okta.com/oauth2/default',
  clientId: 'REDACTED',
  redirectUri: 'http://localhost:8080/implicit/callback', // Handle the response from Okta and store the returned tokens.
  scopes: ['openid', 'profile', 'email'],
  pkce: true 
})

Vue.config.productionTip = false
//Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.use(VueRouter)
Vue.use(cors)

router.beforeEach(Vue.prototype.$auth.authRedirectGuard())

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

以下是我的 App.vue 文件：

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
        
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
        <v-btn v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </v-btn>
        <v-btn v-else v-on:click='login' id='login-button'> Login </v-btn>
    </v-app-bar>

    <v-main>
      {{ pageMessage }}
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },


  data: () => ({
      authenticated: false,
      pageMessage: "This is Home page"
  }),

  created () {
    this.isAuthenticated()
  },
  watch: {
    // Everytime the route changes, check for auth status
    '$route': 'isAuthenticated'
  },
  methods: {
    async isAuthenticated () {
      
      this.authenticated = await this.$auth.isAuthenticated()
      console.log("is authenticated: " + this.authenticated);
    },
    login () {
      console.log("login redirect")
      this.$auth.loginRedirect('/')
    },
    async logout () {
      await this.$auth.logout()
      await this.isAuthenticated()

      // Navigate back to home
      this.$router.push({ path: '/' })
    }
  }

  
};
</script>

Answer 1

只需将 <router-view></router-view> 添加到 App.vue <v-app> 作为子元素