基于Vue Router从Dropbox OAuth重定向获取Access Token

Hey there! Let's tackle your two Dropbox OAuth + Vue Router issues one by one:

1. Fixing the Route Matching Issue (Component Not Displaying) #

First, let's look at your route guard code—there's a small but critical issue here: when matching a route with meta.dropbox, you're calling next({ name: 'DropboxAuthFlow' }), which causes an infinite redirect loop. The router is already trying to navigate to this route, and forcing another redirect to the same route breaks the rendering flow.

Fix this by simply calling next() to allow the navigation to proceed:

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)) {
    // Just allow the navigation instead of redirecting again
    next()
  } else {
    next()
  }
})

Also, double-check that your Vue Router is properly set to history mode (you mentioned this already, so that's good). For local development, Vue CLI's devServer handles history mode fallback automatically, but make sure your production server (if applicable) has the correct fallback configuration (e.g., Nginx try_files rule). Your Dropbox redirect URI (http://localhost:8080/dropbox) is correctly configured—Dropbox only validates the path portion of the URI, so the hash fragment won't cause issues here.

2. Parsing the Access Token from the Hash #

Absolutely, using $route.hash is a valid approach! Dropbox returns the auth credentials in the URL's hash fragment, and you can parse them easily in your DropboxAuthFlow.vue component:

Option 1: Use URLSearchParams (Modern Browsers) #

In the component's mounted or created hook:

mounted() {
  // Remove the leading # from the hash string
  const hashContent = this.$route.hash.slice(1)
  const authParams = new URLSearchParams(hashContent)

  // Extract the values you need
  const accessToken = authParams.get('access_token')
  const tokenType = authParams.get('token_type')
  const uid = authParams.get('uid')
  const accountId = authParams.get('account_id')

  if (accessToken) {
    // Store the token (e.g., in localStorage, Vuex) or use it directly
    console.log('Successfully retrieved Dropbox access token:', accessToken)
    // Example: Initialize Dropbox client with the token
    // const dropboxClient = new Dropbox({ accessToken: accessToken, fetch: fetch })
  }
}

Option 2: Manual Parsing (Legacy Browser Support) #

If you need to support older browsers that don't have URLSearchParams, you can parse the hash manually:

mounted() {
  const hashContent = this.$route.hash.slice(1)
  const authParams = {}

  hashContent.split('&').forEach(paramPair => {
    const [key, value] = paramPair.split('=')
    authParams[key] = decodeURIComponent(value)
  })

  const accessToken = authParams.access_token
  // Handle the token as needed
}

Either method will let you extract the access token and other auth details seamlessly.

内容的提问来源于stack exchange，提问作者ExcessJudgment