当前位置：首页 > VUE

vue实现oauth

2026-03-27 13:42:47VUE

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 和回调 URL（如 http://localhost:8080/callback）。将配置信息保存在环境变量或项目配置文件中：

// src/config/auth.js
export const oauthConfig = {
  clientId: 'YOUR_CLIENT_ID',
  authorizationEndpoint: 'https://provider.com/oauth2/authorize',
  tokenEndpoint: 'https://provider.com/oauth2/token',
  redirectUri: 'http://localhost:8080/callback',
  scopes: 'openid profile email'
};

创建登录组件

在 Vue 组件中实现登录按钮，点击后跳转到 OAuth 提供商的授权页面：

vue实现oauth

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

<script>
import { oauthConfig } from '@/config/auth';
export default {
  methods: {
    login() {
      const params = new URLSearchParams({
        response_type: 'code',
        client_id: oauthConfig.clientId,
        redirect_uri: oauthConfig.redirectUri,
        scope: oauthConfig.scopes,
        state: 'random_state_string'
      });
      window.location.href = `${oauthConfig.authorizationEndpoint}?${params}`;
    }
  }
};
</script>

处理回调

在回调路由组件中解析授权码（code），并向后端或直接向 OAuth 提供商交换令牌：

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

<script>
import axios from 'axios';
import { oauthConfig } from '@/config/auth';
export default {
  async mounted() {
    const code = this.$route.query.code;
    const state = this.$route.query.state;

    if (code && state === 'random_state_string') {
      try {
        const response = await axios.post(oauthConfig.tokenEndpoint, {
          code,
          client_id: oauthConfig.clientId,
          client_secret: 'YOUR_CLIENT_SECRET',
          redirect_uri: oauthConfig.redirectUri,
          grant_type: 'authorization_code'
        });
        localStorage.setItem('access_token', response.data.access_token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Token exchange failed:', error);
      }
    }
  }
};
</script>

路由配置

在 vue-router 中设置回调路由和受保护路由：

vue实现oauth

// src/router/index.js
const routes = [
  { path: '/callback', component: () => import('@/views/Callback.vue') },
  { 
    path: '/dashboard', 
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
];

权限验证

通过路由守卫检查令牌，未登录用户重定向到登录页：

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

令牌刷新

实现静默刷新逻辑，在令牌过期前使用 refresh_token 获取新令牌：

async function refreshToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  const response = await axios.post(oauthConfig.tokenEndpoint, {
    grant_type: 'refresh_token',
    refresh_token: refreshToken,
    client_id: oauthConfig.clientId
  });
  localStorage.setItem('access_token', response.data.access_token);
}