vue实现oauth
Vue 中实现 OAuth 的步骤
安装必要的依赖
在 Vue 项目中，通常需要安装 axios 用于 HTTP 请求，以及 vue-router 用于路由管理。如果需要处理 OAuth 回调，可能还需要 vue-oauth 或类似库。
npm install axios vue-router配置 OAuth 客户端
在 OAuth 提供商（如 Google、GitHub、Auth0 等）注册应用，获取 client_id 和 client_secret。根据提供商的要求配置回调 URL（通常是 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_GOOGLE_CLIENT_ID';
const redirectUri = encodeURIComponent('http://localhost:8080/callback');
const scope = encodeURIComponent('profile email');
window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;
}
}
};
</script>处理回调
在回调页面（如 /callback）中，解析授权码并交换访问令牌。使用 vue-router 和 axios 处理：
<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', {
code,
client_id: 'YOUR_GOOGLE_CLIENT_ID',
client_secret: 'YOUR_GOOGLE_CLIENT_SECRET',
redirect_uri: 'http://localhost:8080/callback',
grant_type: 'authorization_code'
});
const accessToken = response.data.access_token;
localStorage.setItem('access_token', accessToken);
this.$router.push('/dashboard');
} catch (error) {
console.error('OAuth error:', error);
}
}
}
};
</script>存储和使用令牌
将获取的访问令牌存储在 localStorage 或 Vuex 中，并在后续请求中携带：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});验证令牌和用户状态
在路由守卫中检查用户是否已登录，未登录则重定向到登录页：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('access_token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});登出功能
清除本地存储的令牌并重定向到登录页：
methods: {
logout() {
localStorage.removeItem('access_token');
this.$router.push('/login');
}
}注意事项
- OAuth 流程可能因提供商而异，需参考具体文档。
- 生产环境中应使用环境变量存储
client_id和client_secret。 - 考虑使用
PKCE增强安全性，尤其是公共客户端。
