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