使用Vue路由器从Dropbox Oauth重定向获取访问令牌

Question

我正在使用Dropbox JS SDK，并使用getAuthenticationUrl方法实现OAuth2。此方法需要一个重定向URL，该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
    },

我希望这可以帮助面临此问题的人...仍然对其他/更好的解决方案持开放态度。