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

Question

I converted my Vuejs project using Vue Router that has Okta login to use Vuetify. However, my Auth component is not able to accept the callback response from Okta. After login to Okta I see this in my browser 'http://localhost:8080/implicit/callback?code=SAiq23P9u6STxJKvij5frqzd6b4oNGNV1w6e5xi6oRo&state=BPCu2QkMZ57OR0NKDR25RA6UbEzb02Jd8g16zz8B7kdF487JyKQGonr56TwTxzQa#/'. It seems like my Auth component is not able to process the callback after integrating Vuetify.

The following is my main.js file:

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')

The following is my App.vue file:

<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>作为子元素