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

微信OAuth2.0授权流程概述

微信OAuth2.0授权登录主要包含以下步骤：

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

参考：网站应用微信登录

核心代码实现

permission.ts

//permission.ts
import router from "@/router";
import NProgress from "@/utils/nprogress";
import { loginByCode } from "@/api/user";
//微信配置APP_ID、REDIRECT_URI等
import { WEWORK_CONFIG } from "@/config/wechatConfig";
export function setupPermission() {
  // 白名单路由
  const whiteList = ["/login"];

  router.beforeEach((to, from, next) => {
    NProgress.start();
    const accessToken = localStorage.getItem("accessToken");
    const loginStatus = localStorage.getItem("loginStatus");
    const urlParams = new URLSearchParams(window.location.search);

    if (
      loginStatus === "0" ||
      loginStatus == null ||
      loginStatus == undefined
    ) {
      const authUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        WEWORK_CONFIG.APP_ID +
        "&redirect_uri=" +
        encodeURIComponent(WEWORK_CONFIG.REDIRECT_URI) +
        "&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect";

      // 无论拒绝还是授权都设置成1
      localStorage.setItem("loginStatus", "1");
      window.location.href = authUrl;
    } else if (loginStatus === "1") {
      // 用户已授权，获取code
      try {
        // 通过回调链接设置code status
        // 同意授权 携带code参数，拒绝授权没有code参数

        const code = urlParams.get("code");

        console.log("code", code);

        if (code) {
          // 拿到code 访问服务端的登录接口
          loginByCode({
            code,
          })
            .then((res) => {
              console.log("登录成功", res);
              // 登录成功后设置已登录状态
              localStorage.setItem("accessToken", res.data.token);
              localStorage.setItem("refreshToken", res.data.refreshToken);
              localStorage.setItem("openId", res.data.openId);
              localStorage.setItem("loginStatus", "2");
              next();
            })
            .catch(() => {
              // 失败，设置状态未登录，刷新页面
              alert("登录失败" + code);
              localStorage.setItem("loginStatus", "0");
              location.reload();
            });
        } else {
          // 未同意授权，刷新页面
          //alert("未同意授权");
          localStorage.setItem("loginStatus", "0");
          location.reload();
        }
      } catch (err) {
        // 失败，设置状态未登录，刷新页面
        //alert("授权失败");
        localStorage.setItem("loginStatus", "0");
        location.reload();
      }
    } else {
      // 已登录直接进入
      next();
    }
  });

  router.afterEach(() => {
    NProgress.done();
  });
}

main.ts

import { createApp } from "vue";
import { createPinia } from "pinia";
import { setupPermission } from "@/plugins";

import App from "./App.vue";
import router from "./router";
import "virtual:uno.css";
const app = createApp(App);
// 注册动态路由
setupPermission();

app.use(createPinia());
app.use(router);

app.mount("#app");

总结

通过以上实现，你可以为H5应用添加安全可靠的微信登录功能，提升用户体验和转化率。实际项目中还需根据具体需求进行调整和优化。

希望这篇博客对你有所帮助，欢迎留言交流！