vue auth2实现
Vue 中实现 OAuth2 认证
安装依赖
使用 vue-oidc-client 或 vue-auth 等库简化流程。安装示例：
npm install vue-auth oauth2orize axios配置 OAuth2 客户端
在 Vue 项目中创建配置文件（如 auth.js），初始化客户端参数：
import Auth from 'vue-auth';
import axios from 'axios';
import oauth2 from 'vue-auth/oauth2';
const authConfig = {
auth: oauth2({
clientId: 'YOUR_CLIENT_ID',
clientSecret: 'YOUR_CLIENT_SECRET',
redirectUri: 'http://localhost:8080/callback',
authorizeUrl: 'https://oauth-provider.com/oauth2/auth',
tokenUrl: 'https://oauth-provider.com/oauth2/token',
userInfoUrl: 'https://oauth-provider.com/oauth2/userinfo'
}),
http: axios,
rolesVar: 'role'
});
Vue.use(Auth, authConfig);登录与回调处理
在登录按钮中触发 OAuth2 授权流程：
methods: {
login() {
this.$auth.oauth2({
provider: 'google' // 或其他提供商名称
});
}
}在路由中配置回调页面（如 /callback），解析授权码并获取 Token：
created() {
this.$auth.oauth2Callback()
.then(() => this.$router.push('/dashboard'))
.catch(err => console.error(err));
}请求拦截与 Token 管理
通过 Axios 拦截器自动附加 Token 到请求头：
axios.interceptors.request.use(config => {
if (this.$auth.token()) {
config.headers.Authorization = `Bearer ${this.$auth.token()}`;
}
return config;
});权限控制
使用 Vue Router 的全局守卫验证登录状态：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !this.$auth.check()) {
next('/login');
} else {
next();
}
});注销处理
调用 OAuth2 的注销端点并清理本地 Token：
methods: {
logout() {
this.$auth.logout({
makeRequest: true,
redirectUri: 'http://localhost:8080'
});
}
}注意事项
- 确保后端 OAuth2 服务已正确配置 CORS 和回调 URL。
- 敏感信息（如
clientSecret）应通过环境变量注入，避免硬编码。 - 使用 HTTPS 保护 Token 传输，避免中间人攻击。
通过以上步骤，Vue 应用可集成标准的 OAuth2 认证流程，支持第三方登录（如 Google、GitHub）或自建授权服务器。
