mod:登录

frontend/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@types/node": "22.13.5",
+    "@types/crypto-js": "4.1.1",
     "@vitejs/plugin-vue": "5.2.1",
     "@vue/tsconfig": "0.7.0",
     "sass-embedded": "^1.85.1",

frontend/src/App.vue

@@ -1,11 +1,34 @@
-<script setup lang="ts">
-</script>
 
 <template>
-  <router-view
-  >
-  </router-view>
+  <div id="app">
+
+    <router-view v-slot="{ Component }">
+      <keep-alive :include="keepAliveIncludes">
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
+
+
+  </div>
 </template>
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import Login from '@/components/login/index.vue';
+import useUserInfo from "@/stores/modules/user";
+const useUserInfoStore = useUserInfo();
+
+const router = useRouter()
+const route = useRoute()
+/* keep alive 的路由名称 */
+const keepAliveIncludes = router
+    .getRoutes()
+    .filter((router) => router.meta?.keepAlive)
+    .map((router) => router.name as string)
+
+
+
+</script>
+
 
 <style scoped>
 .logo {

frontend/src/components/login/index.vue

@@ -5,7 +5,7 @@
       width="354px"
       custom-class="login-dialog"
       :close-on-click-modal="false"
-      :show-close="true"
+      :show-close="false"
       @close="emit('update:dialogVisible',false)"
     >
     <div class="login-box">
@@ -19,7 +19,7 @@
 
       <el-form
         ref="loginForm"
-        :model="loginForm"  
+        :model="loginForm"
         :rules="loginRules"
         autocomplete="on"
         label-position="left"
@@ -57,7 +57,7 @@
               v-model="loginForm.password"
               placeholder="请输入密码"
               type="password"
-            style="width: 270px;"
+               style="width: 270px;"
               show-password
               maxlength="30"
               tabindex="2"
@@ -85,8 +85,8 @@
               autocomplete="off"
             >
               <template #append>
-                <el-button 
-                  :disabled="isCodeSending" 
+                <el-button
+                  :disabled="isCodeSending"
                   @click="sendVerificationCode"
                 >
                   {{ codeButtonText }}
@@ -180,16 +180,16 @@ const sendVerificationCode = () => {
     ElMessage.warning('请先输入手机号')
     return
   }
-  
+
   sendCode({
     phone: loginForm.username
   }).then(() => {
     isCodeSending.value = true
     countdown.value = 60
-    
+
   // 这里应该调用发送验证码API
   // await sendCode(loginForm.username)
-  
+
   const timer = setInterval(() => {
     countdown.value--
     if (countdown.value <= 0) {
@@ -266,7 +266,7 @@ const sendVerificationCode = () => {
     width: 100%;
     margin-top: 10px;
     background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
-    
+
   }
   :deep(.el-form-item) + .login-button {
     margin-top: 20px;
@@ -378,4 +378,4 @@ const sendVerificationCode = () => {
       color: #2FB0FF;
     }
 }
-</style>
+</style>

frontend/src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
+import { authGuard } from './plugins/authGuard'
+
 
 const routes: RouteRecordRaw[] = [
     {
@@ -10,6 +12,9 @@ const routes: RouteRecordRaw[] = [
         path: "/home",
         name: "home",
         component: () => import("@/views/Home/index.vue"),
+        meta: {
+            noAuth: true,
+        },
     },
     {
         path: "/setting",
@@ -52,5 +57,6 @@ const router = createRouter({
     routes
 });
 
+authGuard(router)
 
 export default router;

frontend/src/router/plugins/authGuard.ts

@@ -0,0 +1,26 @@
+import { Router, useRoute } from 'vue-router'
+import useUserInfo from "@/stores/modules/user";
+const route = useRoute()
+/**
+ * 除了注册页，当没有 token 则跳转至注册页
+ * @param router
+ */
+
+
+export function authGuard(router: Router) {
+  router.beforeEach((to, from, next) => {
+    /* 跳过路由守卫 */
+
+    const useUserInfoStore = useUserInfo();
+    if (useUserInfoStore.token /* 已登录 */) {
+      return next()
+    } else {
+      if(to.meta.noAuth)  return next()
+      useUserInfoStore.updateLoginShow(true)
+    }
+
+
+
+    return next()
+  })
+}

frontend/src/stores/modules/user.ts

@@ -4,16 +4,18 @@ import { defineStore } from 'pinia';
 
 const useUserInfo = defineStore('userInfo', {
     state: () => ({
-        userInfo: {
-            account_name: 'John Doe',
-            phone:"18679381234"
-        },
+        token: '',
+        loginShow:false,
+        userInfo: {},
     }),
     actions: {
         // 添加必要的 actions
         updateUserInfo(data: any ) {
             this.userInfo = data;
-        }
+        },
+        updateLoginShow(data: boolean) {
+            this.loginShow = data;
+        },
     },
     getters: {
         // 添加必要的 getters
@@ -24,7 +26,7 @@ const useUserInfo = defineStore('userInfo', {
     persist: {
         key: 'user-info',
         storage: localStorage,
-        paths: ['userInfo',]
+        paths: ['userInfo','token']
     }
 });
 

frontend/src/utils/oss.ts

@@ -1,7 +1,7 @@
 /**
  * oss resize 参数
  * 详情见 https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.751.7434663c1Ne07e
- *
+ *     ,/
  * oss watermark 参数
  * 详情见 https://help.aliyun.com/document_detail/44957.html
  *

frontend/src/views/Home/index.vue

@@ -23,7 +23,14 @@
     <el-button type="primary" @click="loginIn">登录成功</el-button>
     <el-button type="success" @click="showLoginDialog">登录</el-button>
     <el-button type="info" @click="checkVisible = true">软件检查</el-button>
-    <el-button type="warning">Warning</el-button>
+    <router-link
+      :to="{
+          name:'PhotographyCheck'
+      }"
+    >
+      <el-button type="warning">拍摄物体</el-button>
+    </router-link>
+
     <el-button type="danger">Danger</el-button>
     <hardware-check v-model="checkVisible" @confirm="onCheckComplete"></hardware-check>
     <Login v-model:dialogVisible="dialogVisible" @login-success="handleLoginSuccess"/>
@@ -187,7 +194,6 @@ function socketConnect(){
     })
 
     clientStore.ipc.on(icpList.socket.message, async (event, result) => {
-      console.log('message');
       console.log(result);
     })
   }