vue实现oauth
Vue 实现 OAuth 的步骤
安装必要的依赖
确保项目中安装了 axios 和 vue-router。OAuth 通常需要发送 HTTP 请求和处理路由跳转。
npm install axios vue-router配置 OAuth 客户端
在 OAuth 提供商（如 Google、GitHub 等）的开发者平台注册应用，获取 client_id 和 client_secret。配置回调地址（Redirect URI）为本地开发地址，例如 http://localhost:8080/callback。
创建登录按钮
在 Vue 组件中添加一个按钮，用于跳转到 OAuth 提供商的授权页面。例如，使用 Google OAuth：
<template>
<button @click="loginWithGoogle">Login with Google</button>
</template>
<script>
export default {
methods: {
loginWithGoogle() {
const clientId = 'YOUR_CLIENT_ID';
const redirectUri = encodeURIComponent('http://localhost:8080/callback');
const scope = encodeURIComponent('profile email');
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;
window.location.href = authUrl;
}
}
};
</script>处理回调
创建一个路由和组件用于处理 OAuth 回调。在回调页面中，解析 URL 中的 code，然后向 OAuth 提供商的 token 端点发送请求以交换访问令牌。
<template>
<div>Processing login...</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('https://oauth2.googleapis.com/token', {
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET',
code,
redirect_uri: 'http://localhost:8080/callback',
grant_type: 'authorization_code'
});
const accessToken = response.data.access_token;
// 存储 token 并跳转到主页
localStorage.setItem('access_token', accessToken);
this.$router.push('/');
} catch (error) {
console.error('OAuth error:', error);
}
}
}
};
</script>路由配置
在 router/index.js 中配置回调路由：
import Vue from 'vue';
import Router from 'vue-router';
import Callback from '@/components/Callback';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/callback',
name: 'Callback',
component: Callback
}
]
});验证令牌
在需要验证的页面或组件中，检查本地存储的 access_token。如果不存在，则跳转到登录页面。
export default {
created() {
const token = localStorage.getItem('access_token');
if (!token) {
this.$router.push('/login');
}
}
};注销功能
清除本地存储的 access_token 并跳转到登录页面。
methods: {
logout() {
localStorage.removeItem('access_token');
this.$router.push('/login');
}
}注意事项
- 在生产环境中使用 HTTPS 并确保
client_secret的安全性。 - 根据 OAuth 提供商的不同，授权 URL 和 token 端点的路径可能有所变化。
- 考虑使用
vuex集中管理用户状态和令牌。
