feat(自动登录): 通过加密方式实现自动注册登录

ikuaitu · May 29, 2024 · c0bcaa1 · c0bcaa1
1 parent 44898bd
commit c0bcaa1
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-04-24 14:07:06
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 14:47:44
+ * @LastEditTime: 2024-05-29 10:07:24
  * @Description: 用户接口登录
  */
 
@@ -37,6 +37,9 @@ export const register = (data: any) => instance.post('/api/auth/local/register',
 // 登出
 export const logout = () => localStorage.setItem(tokenKey, '');
 
+// 自动登录
+export const autoLogin = (data: any) => instance.post('/api/custom/autoAuthUser', data);
+
 // 设置token
 export const setToken = (token: string) => localStorage.setItem(tokenKey, token);
 

diff --git a/src/components/myTemplName.vue b/src/components/myTemplName.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-05-11 13:23:48
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 17:33:56
+ * @LastEditTime: 2024-05-29 10:25:44
  * @Description: 文件名称
 -->
 
@@ -26,8 +26,13 @@
 <script name="ImportJson" setup>
 import { debounce } from 'lodash-es';
 import useMaterial from '@/hooks/useMaterial';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import useSelect from '@/hooks/select';
+import { getTmplList } from '@/api/user';
+
+// const APIHOST = import.meta.env.APP_APIHOST;
+import qs from 'qs';
+const router = useRouter();
 const { getTemplInfo, updataTemplInfo } = useMaterial();
 
 const { canvasEditor } = useSelect();
@@ -49,7 +54,7 @@ watch(
   }
 );
 
-onMounted(() => {
+onMounted(async () => {
   if (route?.query?.id) {
     getTemplInfo(route?.query?.id)
       .then((res) => {
@@ -59,8 +64,45 @@ onMounted(() => {
       .catch(() => {
         window.location.href = '/';
       });
+  } else if (route?.query?.projectid) {
+    const infoid = await queryTemplIdByProId(route?.query?.projectid);
+    if (infoid) {
+      getTemplInfo(infoid).then((res) => {
+        router.replace(route.fullPath + '&id=' + infoid);
+        fileName.value = res?.data?.attributes?.name;
+        canvasEditor.loadJSON(JSON.stringify(res?.data?.attributes?.json));
+      });
+    }
   }
 });
+
+const queryTemplIdByProId = (projectid) => {
+  const query = {
+    populate: {
+      img: '*',
+    },
+    filters: {
+      externalId: {
+        $eq: String(projectid),
+      },
+    },
+    pagination: {
+      page: 1,
+      pageSize: 50,
+    },
+  };
+
+  return getTmplList(qs.stringify(query))
+    .then((res) => {
+      if (res.data.data.length) {
+        return res.data.data[0].id;
+      }
+    })
+    .catch((err) => {
+      return err;
+    });
+};
+
 const saveTempl = () => {
   loading.value = true;
   updataTemplInfo(route.query.id, fileName.value)

diff --git a/src/hooks/useMaterial.js b/src/hooks/useMaterial.js
@@ -2,12 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2024-05-11 11:51:59
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 15:46:39
+ * @LastEditTime: 2024-05-29 10:14:01
  * @Description: 素材相关
  */
 
 import dayjs from 'dayjs';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { uploadImg, createdTempl, getTmplInfo, updataTempl, removeTempl } from '@/api/user';
 import { Modal } from 'view-ui-plus';
 
@@ -16,6 +16,7 @@ import { useI18n } from 'vue-i18n';
 export default function useMaterial() {
   const { t } = useI18n();
   const router = useRouter();
+  const route = useRoute();
   const canvasEditor = inject('canvasEditor');
 
   // 创建模板
@@ -24,7 +25,6 @@ export default function useMaterial() {
     canvasEditor.setSize(width, height);
     const name = dayjs().format('YYYY[年]MM[月]DD[日]HH[小时]mm[分钟]ss[秒]') + '创建的作品';
     const data = await getCanvasCommonData();
-
     // 上传图片
     const templInfo = await createdTempl({
       data: {
@@ -42,6 +42,7 @@ export default function useMaterial() {
     const templInfo = await createdTempl({
       data: {
         ...data,
+        externalId: route.query?.projectid || null,
         name,
       },
     });

diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -1,8 +1,23 @@
 import type { RouteRecordRaw } from 'vue-router';
 
+import { setToken, autoLogin } from '@/api/user';
+
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    beforeEnter: async (to) => {
+      // 自动登录功能
+      if (to.query.username && to.query.key) {
+        const res = await autoLogin({
+          username: to.query.username,
+          key: to.query.key,
+        });
+        if (res.data.jwt) {
+          setToken(res.data.jwt);
+        }
+      }
+      return true;
+    },
     component: () => import('@/views/home/index.vue'),
   },
 ];