当前位置：首页 > backend >正文

【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南

backend 2025/9/6 6:54:32

【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南

企业微信OAuth2.0授权登录是企业内部应用常见的功能需求，本文将详细介绍如何在Vue3+TypeScript项目中实现企业微信OAuth2.0授权登录功能。

企业微信OAuth2.0授权流程概述

根据企业微信官方文档，OAuth2.0授权登录主要包含以下步骤：

前端引导用户到企业微信授权页面
用户同意授权后，企业微信重定向回应用并附带code
前端将code发送到后端服务器
后端使用code换取access_token和用户信息
前端接收登录结果并更新应用状态

核心代码实现

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) {// 路由未匹配，跳转到404next("/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）,若无授权跳转到授权页面，有授权则获取tokenconst 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;
}