修改登陆逻辑

src/api/modules/auth.ts

@@ -20,10 +20,7 @@ interface loginRes {
  */
 export async function login(code: LocationQueryValue | LocationQueryValue[]) {
   let res = await request({
-    url:
-      import.meta.env.MODE === "development"
-        ? "/login/code/test"
-        : "/login/code",
+    url: "/login/code",
     method: "post",
     headers: {
       isToken: false,

src/api/request.ts

@@ -13,5 +13,13 @@ request.interceptors.request.use((config) => {
   return config;
 });
 
+request.interceptors.response.use((res) => {
+  if (res.data.code === 401) {
+    location.replace(
+      `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx67ca1b8c9816ef28&redirect_uri=${location.href}&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`
+    );
+  }
+  return res;
+});
 
 export default request;

src/hooks/index.ts

@@ -1,6 +1,24 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useStore } from "vuex";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter, LocationQuery } from "vue-router";
+import { Howl } from "howler";
+import * as API from "@/api";
+import store from "@/store";
+
+/** 用户通过微信code登陆 */
+export const useLogin = async (query: LocationQuery) => {
+  //登陆
+  const res = await API.login(query.code);
+  store.commit("setToken", res.data.token);
+  store.commit("setUserData", res.data.wxUserInfo);
+  //获取用户信息
+  const userDataRes = await API.userInfo();
+  store.commit("setUserData", {
+    ...store.getters.getUserData,
+    expireTime: userDataRes.data.data.expireTime,
+  });
+};
+
 /**
  * 获取用户会员到期时间
  */
@@ -12,6 +30,7 @@ export const useExpireTime = () => {
   };
 };
 
+/** 判断是不是zhangbing的openapi */
 export const useOpenIdIsZhangbing = () => {
   const store = useStore();
   const openid = computed(() => store.getters.getUserData.openid);
@@ -21,7 +40,14 @@ export const useOpenIdIsZhangbing = () => {
   };
 };
 
-export const useSound = () => {};
+export const useSound = (videoSrc: string) => {
+  const sound = new Howl({
+    autoplay: true,
+    src: videoSrc,
+  });
+
+  return sound.unload;
+};
 
 /**
  * 路由转发汇总class模式书写,需要注意this指向
@@ -59,47 +85,3 @@ export class RouterBus {
     this.router.push({ path: "/mockTest", query: this.route.query });
   };
 }
-
-// function deepClone<T>(target: T, hash = new Map()): T {
-//   //地址存在则说明存在循环引用,直接返回新构造的引用地址
-//   if (hash.has(target)) return hash.get(target);
-//   //按类型处理数据
-//   switch (Object.prototype.toString.apply(target).slice(8, -1)) {
-//     case "Object": {
-//       const result: T = Object.assign({}, target);
-//       hash.set(target, result);
-//       for (let key in target) {
-//         result[key] = deepClone(target[key], hash);
-//       }
-//       return result;
-//     }
-//     case "Array": {
-//       const result: T = Object.assign([], target);
-//       hash.set(target, result);
-//       for (let key in target) {
-//         result[key] = deepClone(target[key], hash);
-//       }
-//       return result;
-//     }
-//     case "Map": {
-//       const result = new Map();
-//       hash.set(target, result);
-//       target.forEach((value, key) => {
-//         let v: any, k: any;
-//         hash.set(value, v);
-//         hash.set(key, k);
-//       });
-//       return result;
-//     }
-//     default:
-//       return target;
-//   }
-// }
-
-// let a = { a: 1, b: { a: 1 }, c: [{}, 2, 3] };
-// a.b = a;
-// a.c[1] = a;
-// let b = deepClone(a);
-// a.c[2] = 10;
-// a.a = 22;
-// console.log({ a, b });

src/route/guard.ts

@@ -2,8 +2,27 @@ import { Router } from "vue-router";
 import store from "@/store";
 import dayjs from "dayjs";
 import { Toast } from "vant";
+import { useLogin } from "@/hooks";
+
 const guard = (router: Router) => {
   router.beforeEach(async (to, from, next) => {
+    if (to.query.state === "LOGIN") {
+      const toast = Toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true,
+        message: "登陆中",
+      });
+      await useLogin(to.query);
+      toast.message = `登陆成功`;
+      Toast.clear();
+    }
+
+    if (store.getters.getToken === "") {
+      location.replace(
+        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx67ca1b8c9816ef28&redirect_uri=${location.href}&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`
+      );
+    }
+
     const userTime = dayjs(store.getters.getUserData.expireTime).valueOf();
     const currentTime = dayjs().valueOf();
     switch (to.path) {

src/route/index.ts

@@ -57,7 +57,7 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      redirect: "/login",
+      redirect: "/home/test",
     },
     ...aotuRoutes,
   ],

src/views/login/index.vue

@@ -23,30 +23,23 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { useRoute, useRouter } from "vue-router";
-import * as API from "@/api";
 import { ref } from "vue";
-import { useStore } from "vuex";
-const router = useRouter();
-const route = useRoute();
-const store = useStore();
+import { useLogin, RouterBus } from "@/hooks";
 const loginState = ref(0);
 
-API.login(route.query.code).then(async (res) => {
-  if (res.code == 200) {
-    store.commit("setToken", res.data.token);
-    store.commit("setUserData", res.data.wxUserInfo);
-    let userDataRes = await API.userInfo();
-    store.commit("setUserData", {
-      ...store.getters.getUserData,
-      expireTime: userDataRes.data.data.expireTime,
-    });
+const {
+  route: { query },
+  router,
+} = new RouterBus();
+
+useLogin(query)
+  .then(() => {
     loginState.value = 1;
     router.push("/home/test");
-  } else {
+  })
+  .catch(() => {
     loginState.value = 2;
-  }
-});
+  });
 </script>
 
 <style scoped lang="scss">