路由验证id

src/router/index.ts

@@ -1,13 +1,38 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useGenerateStore } from '@/stores/modules/generate'
 
 /**
  * 路由缓存机制:
  * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
  * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
  * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
+ * 
+ * 自定义验证规则：
+ * meta：{ verify: （）=> boolean || string }
+ * 1. boolean true 跳转 false 不跳转
+ * 2. string 跳转的路由path
  */
 
-
+/** 验证id
+ * @param num 验证id的数量1-5
+ * 1. 顾客id
+ * 2. 进店记录id
+ * 3. 服装id
+ * 4. 模特照片id
+ * 5. 原始试穿id-优先AI魔改
+ * @returns boolean
+ */
+const VerifyIDs = (num: number) => {
+  const ids = [
+	!!useGenerateStore().customerId,
+	!!useGenerateStore().visitRecordId,
+	!!useGenerateStore().styleId,
+	// !!useGenerateStore().modelPhotoId,
+	true,
+	!!useGenerateStore().originalTryOnId,
+  ];
+  return ids.splice(0, num).every(id => id) ? true : "/stylist/customer";
+}
 const router = createRouter({
   history: createWebHistory('/'),
   //   history: createWebHistory(import.meta.env.VITE_APP_URL),
@@ -45,22 +70,25 @@ const router = createRouter({
         {
           path: 'index',
           name: 'index',
-          component: () => import('@/views/stylist/index.vue')
+          component: () => import('@/views/stylist/index.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           path: 'sex',
           name: 'sex',
-          component: () => import('@/views/stylist/sex.vue')
+          component: () => import('@/views/stylist/sex.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           path: 'dressfor',
           name: 'dressfor',
-          component: () => import('@/views/stylist/dressfor.vue')
+          component: () => import('@/views/stylist/dressfor.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           path: 'customer',
           name: 'customer',
-          component: () => import('@/views/stylist/customer.vue')
+          component: () => import('@/views/stylist/customer.vue'),
         }
       ]
     },
@@ -68,7 +96,7 @@ const router = createRouter({
       path: '/asistant',
       name: 'asistant',
       component: () => import('../views/asistant/index.vue'),
-      meta: { cache: true }
+      meta: { cache: true, verify: ()=> VerifyIDs(2) }
     },
     {
       path: '/workshop',
@@ -83,57 +111,67 @@ const router = createRouter({
           path: '/workshop/selectStyle',
           name: 'SelectStyle',
           component: () => import('../views/Workshop/selectStyle.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           path: '/workshop/selectModel',
           name: 'SelectModel',
-          component: () => import('../views/Workshop/selectModel.vue')
+          component: () => import('../views/Workshop/selectModel.vue'),
+		  meta: { verify: ()=> VerifyIDs(3) }
         },
         {
           path: '/workshop/product',
           name: 'Product',
-          component: () => import('../views/Workshop/product.vue')
+          component: () => import('../views/Workshop/product.vue'),
+		  meta: { verify: ()=> VerifyIDs(4) }
         },
         {
           // 上传照片1
           path: '/workshop/uploadFace',
           name: 'uploadFace',
-          component: () => import('../views/Workshop/uploadFace1.vue')
+          component: () => import('../views/Workshop/uploadFace1.vue'),
+		  meta: { verify: ()=> VerifyIDs(5) }
         },
         {
           // 上传照片2
           path: '/workshop/uploadFace2',
           name: 'uploadFace2',
-          component: () => import('../views/Workshop/uploadFace2.vue')
+          component: () => import('../views/Workshop/uploadFace2.vue'),
+		  meta: { verify: ()=> VerifyIDs(5) }
         },
         {
           // 自定义创作
           path: '/workshop/customize',
           name: 'customize',
-          component: () => import('../views/Workshop/customize.vue')
+          component: () => import('../views/Workshop/customize.vue'),
+		  meta: { verify: ()=> VerifyIDs(5) }
         },
         {
           // library
           path: '/workshop/library',
           name: 'library',
-          component: () => import('../views/Workshop/library.vue')
+          component: () => import('../views/Workshop/library.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           path: '/workshop/profile',
           name: 'profile',
-          component: () => import('../views/Workshop/profile.vue')
+          component: () => import('../views/Workshop/profile.vue'),
+		  meta: { verify: ()=> VerifyIDs(1) }
         },
         {
           // creation
           path: '/workshop/creation',
           name: 'creation',
-          component: () => import('../views/Workshop/creation/index.vue')
+          component: () => import('../views/Workshop/creation/index.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         },
         {
           // 完成创建
           path: '/workshop/end',
           name: 'end',
-          component: () => import('../views/Workshop/end.vue')
+          component: () => import('../views/Workshop/end.vue'),
+		  meta: { verify: ()=> VerifyIDs(2) }
         }
       ]
     }

src/router/router-config.ts

@@ -5,10 +5,20 @@ const whiteList = ['/login']
 console.log(whiteList)
 
 router.beforeEach((to, from, next) => {
-  next()
+	const verify = to.meta?.verify;
+	if (typeof verify === 'function') {
+		let res = verify()
+		if (res === false) {
+			return next(false)
+		} else if (typeof res === 'string') {
+			console.log(res)
+			return next({ path: res })
+		}
+	}
+	next()
 })
 
 router.afterEach(() => {
-  // finish progress bar
-  //   NProgress.done()
+	// finish progress bar
+	//   NProgress.done()
 })

src/views/Workshop/product.vue

@@ -179,6 +179,7 @@ const { isLoading } = toRefs(data);
 						width: 100%;
 						height: 100%;
 						object-fit: contain;
+						display: block;
 					}
 					> .operation{
 						position: absolute;