Получить токен доступа из Dropbox Oauth Redirect с помощью Vue Router

Question

Я работаю с Dropbox JS SDK и реализую OAuth2 с помощью метода getAuthenticationUrl. Этот метод требует URL перенаправления, который при реализации открывает новую вкладку с URL: http://localhost: 8080 / dropbox # access_token = ABCDEFG & token_type = bearer & uid = 123456789 & account_id = 123456789

Компонент, который запускается процесс содержит:

   created() {
        dropBx = new Dropbox({ fetch: fetch, clientId: this.dropboxAppKey })
        authUrl = dropBx.getAuthenticationUrl('http://localhost:8080/dropbox')
        window.open(`${authUrl}`)
    },

Мой маршрут выглядит так:

    {
        path: '/dropbox',
        name: 'DropboxAuthFlow',
        component: () => import('@/views/DropboxAuthFlow.vue'),
        meta: {
            requiresAuth: false,
            dropbox: true,
        },
    },

Я использую режим истории. У меня установлена ​​защита маршрута, которая выглядит следующим образом:

router.beforeEach((to, from, next) => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
        let user = firebase.auth().currentUser
        if (user) {
            next()
        } else {
            next({ name: 'LoginPage' })
        }
    } else if (to.matched.some(route => route.meta.dropbox)) {
        next({ name: 'DropboxAuthFlow' })
    } else {
        next()
    }
})

Перенаправление на новую вкладку браузера действует так, как будто я не вошел в систему, и компонент не отображается должным образом. URI перенаправления авторизуется в консоли разработчика: http://localhost: 8080 / dropbox

Итак, вопросы:

1)  How can I get the redirect URL to work with Vue Router 
and display the URL despite the hash info?
2)  How can I parse the access token off the returned URL? 
(will $route.hash work?)

Answer 1

Итак, я нашел решение ... первое изменение защиты маршрутизатора:

router.beforeEach((to, from, next) => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
        let user = firebase.auth().currentUser
        if (user) {
            next()
        } else {
            next({ name: 'LoginPage' })
        }
    } else {
        next()
    }
})

Второе ... изменение маршрута:

    {
        path: '/dropbox',
        name: 'DropboxAuthFlow',
        component: () => import('@/views/DropboxAuthFlow.vue')
    },

Наконец, измените страницу перенаправления URI:

    created() {
        let hash = this.$route.hash
        let token = hash.substring(hash.indexOf('=') + 1, hash.indexOf('&'))
        // pass token via dispatch action to persist data in db
    },

Надеюсь, это поможет тому, кто столкнулся с этой проблемой ... все еще открыт для других / лучших решений.