Блог

Я преобразовал свой проект Vuejs с помощью маршрутизатора Vue, у которого есть логин Okta, для использования Vuetify. Однако мой компонент аутентификации не может принять ответ обратного вызова от Okta. После входа в Okta я вижу это в своем браузере ‘http://localhost:8080/implicit/callback?code=SAiq23P9u6STxJKvij5frqzd6b4oNGNV1w6e5xi6oRoamp;state=BPCu2QkMZ57OR0NKDR25RA6UbEzb02Jd8g16zz8B7kdF487JyKQGonr56TwTxzQa#/’. Похоже, что мой компонент аутентификации не может обработать обратный вызов после интеграции Vuetify.

Ниже приведен мой 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>
  

просто добавьте a <router-view></router-view> в App.vue <v-app> в качестве дочернего элемента