当前位置：首页 > VUE

vue实现oauth

2026-02-10 04:21:10VUE

Vue 实现 OAuth 的步骤

安装依赖

确保项目中安装了 vue-router 和 axios。如果需要使用第三方 OAuth 库（如 vue-oidc-client 或 auth0-vue），可以通过 npm 或 yarn 安装。

npm install axios vue-router

配置 OAuth 客户端

在 OAuth 服务提供商（如 Google、GitHub、Auth0）注册应用，获取 client_id、client_secret 和 redirect_uri。将这些信息保存在 Vue 项目的环境变量（.env 文件）中。

vue实现oauth

VUE_APP_OAUTH_CLIENT_ID=your_client_id
VUE_APP_OAUTH_REDIRECT_URI=http://localhost:8080/callback

创建登录页面

在 Vue 组件中创建一个登录按钮，点击后跳转到 OAuth 提供商的授权页面。

<template>
  <button @click="login">Login with OAuth</button>
</template>

<script>
export default {
  methods: {
    login() {
      const authUrl = `https://oauth-provider.com/authorize?response_type=code&client_id=${process.env.VUE_APP_OAUTH_CLIENT_ID}&redirect_uri=${process.env.VUE_APP_OAUTH_REDIRECT_URI}`;
      window.location.href = authUrl;
    }
  }
}
</script>

处理回调

在 vue-router 中配置一个回调路由，用于接收 OAuth 提供商返回的授权码（code）。使用 axios 将授权码发送到后端服务器换取 access_token。

vue实现oauth

<template>
  <div>Processing OAuth callback...</div>
</template>

<script>
import axios from 'axios';

export default {
  async mounted() {
    const code = this.$route.query.code;
    if (code) {
      try {
        const response = await axios.post('/api/oauth/token', {
          code,
          client_id: process.env.VUE_APP_OAUTH_CLIENT_ID,
          redirect_uri: process.env.VUE_APP_OAUTH_REDIRECT_URI
        });
        localStorage.setItem('access_token', response.data.access_token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('OAuth error:', error);
      }
    }
  }
}
</script>

保护路由

使用 vue-router 的导航守卫检查用户是否已认证，未认证用户重定向到登录页面。

import router from './router';

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('access_token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

注销功能

清除本地存储的 access_token 并重定向到登录页面。

<template>
  <button @click="logout">Logout</button>
</template>

<script>
export default {
  methods: {
    logout() {
      localStorage.removeItem('access_token');
      this.$router.push('/login');
    }
  }
}
</script>