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

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // ...其他路由
  { path: '/callback', component: CallbackComponent },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

<!-- LoginComponent.vue -->
<template>
  <button @click="login">Login with Dropbox</button>
</template>

<script>
export default {
  methods: {
    login() {
      const authUrl = `https://www.dropbox.com/oauth2/authorize?response_type=code&client_id=YOUR_APP_KEY&redirect_uri=http://localhost:8080/callback`;
      window.location.href = authUrl;
    }
  }
};
</script>

<!-- CallbackComponent.vue -->
<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <div v-else>Authentication successful!</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: true,
      error: null,
    };
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');

    if (code) {
      this.getAccessToken(code);
    } else {
      this.error = 'Authorization code not found';
    }
  },
  methods: {
    async getAccessToken(code) {
      try {
        const response = await axios.post('https://api.dropboxapi.com/oauth2/token', null, {
          params: {
            code,
            grant_type: 'authorization_code',
            client_id: 'YOUR_APP_KEY',
            client_secret: 'YOUR_APP_SECRET',
            redirect_uri: 'http://localhost:8080/callback',
          },
        });
        const accessToken = response.data.access_token;
        // 保存访问令牌，例如使用Vuex或localStorage
        localStorage.setItem('dropboxAccessToken', accessToken);
        this.loading = false;
      } catch (error) {
        this.error = error.response?.data?.error_description || 'Failed to retrieve access token';
        this.loading = false;
      }
    },
  },
};
</script>

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');