【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
企业微信OAuth2.0授权登录是企业内部应用常见的功能需求，本文将详细介绍如何在Vue3+TypeScript项目中实现企业微信OAuth2.0授权登录功能。
企业微信OAuth2.0授权流程概述
根据企业微信官方文档，OAuth2.0授权登录主要包含以下步骤：
- 前端引导用户到企业微信授权页面
- 用户同意授权后，企业微信重定向回应用并附带code
- 前端将code发送到后端服务器
- 后端使用code换取access_token和用户信息
- 前端接收登录结果并更新应用状态
核心代码实现
javascript
import type { NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from "vue-router";
import NProgress from "@/utils/nprogress";
import router from "@/router";
import { usePermissionStore, useUserStore } from "@/store";
import WEWORK_CONFIG from "@/config/weworkConfig";
export function setupPermission() {
// 白名单路由
const whiteList = ["/login"];
const authUrl = WEWORK_CONFIG.AUTH_URL;
router.beforeEach(async (to, from, next) => {
NProgress.start();
const access_token = localStorage.getItem("access_token");
if (
access_token &&
access_token !== "undefined" &&
access_token !== null &&
access_token !== "" &&
access_token !== "null"
) {
// 判断是否登录
if (to.path === "/login") {
// 已登录，访问登录页，跳转到首页
next({ path: "/" });
} else {
const permissionStore = usePermissionStore();
// 判断路由是否加载完成
if (permissionStore.isRoutesLoaded) {
if (to.matched.length === 0) {
// 路由未匹配，跳转到404
next("/404");
} else {
// 动态设置页面标题
const title = (to.params.title as string) || (to.query.title as string);
if (title) {
to.meta.title = title;
}
next();
}
} else {
try {
// 加载路由
const dynamicRoutes = await permissionStore.generateRoutes();
dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route));
next({ ...to, replace: true });
console.log("静态路由:", dynamicRoutes);
} catch (error) {
console.error(error);
// 路由加载失败，重置 token 并重定向到登录页
await useUserStore().clearUserData();
redirectToLogin(to, next);
NProgress.done();
}
}
}
} else {
// 未登录，判断是否在白名单中
if (whiteList.includes(to.path)) {
next();
} else {
//不在白名单中，检测用户是否授权（code）,若无授权跳转到授权页面，有授权则获取token
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get("code");
if (code) {
//请求后台接口，使用code换取access_token和用户信息
useUserStore()
.LoginWeiXin({
code: code,
})
.then(() => {
next();
})
.catch((err) => {
// 登录失败，清空缓存，重定向至构造网页授权链接
console.error(`登录报错:${err}。code:${code}`);
useUserStore()
.clearUserData()
.then(() => {
redirectToLogin(to, next);
});
});
const permissionStore = usePermissionStore();
try {
// 加载路由
const dynamicRoutes = await permissionStore.generateRoutes();
dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route));
next();
console.log("静态路由:", dynamicRoutes);
} catch (error) {
console.error(error);
// 路由加载失败，重置 token 并重定向到登录页
await useUserStore().clearUserData();
redirectToLogin(to, next);
NProgress.done();
}
} else {
//未授权
window.location.href = authUrl;
NProgress.done();
}
}
}
});
// 后置守卫，保证每次路由跳转结束时关闭进度条
router.afterEach(() => {
NProgress.done();
});
}
// 重定向到登录页
function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) {
localStorage.clear();
const authUrl = WEWORK_CONFIG.AUTH_URL;
window.location.href = authUrl;
}总结
本文详细介绍了在Vue3+TypeScript项目中实现企业微信OAuth2.0授权登录的完整流程，包括：
- 企业微信授权流程的理解
- 工具类的封装
- 状态管理
- API接口设计
- 登录页面实现
- 路由守卫配置
- 环境变量和部署注意事项
通过以上实现，你可以为企业内部应用添加安全可靠的企业微信登录功能，提升用户体验和安全性。实际项目中还需根据具体需求进行调整和优化。
希望这篇博客对你有所帮助，欢迎留言交流！