Quellcode durchsuchen

为路由增加了Meta信息;现在路由守卫会根据role检查是否匹配meta信息中的权限进行跳转;为了Typescript不报错新增加一个类型声明

Nivek vor 2 Jahren
Ursprung
Commit
bd49ca02ac
3 geänderte Dateien mit 47 neuen und 2 gelöschten Zeilen
  1. 34 2
      src/router/index.ts
  2. 12 0
      src/types/router-meta.d.ts
  3. 1 0
      tsconfig.json

+ 34 - 2
src/router/index.ts

@@ -33,30 +33,53 @@ const router = createRouter({
                 path: '/storeDetail/:storeId',
                 name: 'storeDetail',
                 component: () => import('../views/portal/StoreDetail.vue'),
+                meta: {
+                    title: '店铺详情'
+                }
             },
             {
                 path: '/staff/createProduct/:storeId',
                 name: 'createProduct',
                 component: () => import('../views/staff/CreateProduct.vue'),
+                meta: {
+                    title: '创建商品',
+                    permission: ['STAFF', 'MANAGER']
+                }
             },
             {
                 path: '/productDetail/:productId',
                 name: 'productDetail',
                 component: () => import('../views/portal/ProductDetail.vue'),
+                meta: {
+                    title: '商品详情'
+                }
             },
             {
                 path: '/customer/buyProduct/:productId',
                 name: 'buyProduct',
                 component: () => import('../views/customer/BuyProduct.vue'),
+                meta: {
+                    title: '购买商品',
+                    permission: ['CUSTOMER']
+                }
             },
             {
                 path: '/customer/allOrder',
-                name: 'bugProduct',
+                name: 'allOrder',
                 component: () => import('../views/customer/AllOrder.vue'),
+                meta: {
+                    title: '全部订单',
+                    permission: ['CUSTOMER']
+                }
             },
             {
                 path: '/manager/createStore',
+                name: 'createStore',
                 component: () => import('../views/manager/CreateStore.vue'),
+                meta: {
+                    title: '创建店铺',
+                    permission: ['MANAGER']
+                }
             },
         ]
     }]
@@ -66,7 +89,16 @@ router.beforeEach((to, from, next) => {
     const role = sessionStorage.getItem('token');
 
     if (role) {
-        next();
+        if(to.meta.permission) {
+            if(to.meta.permission.includes(role)) {
+                next();
+            }
+            else {
+                next('/allStore');
+            }
+        } else {
+            next()
+        }
     } else {
         if(to.path === '/login') {
             next();

+ 12 - 0
src/types/router-meta.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description 扩展Vue-Router-Meta的类型,防止Typescript报错
+ */
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        permission?: Array<string>
+        title?: string
+    }
+}
+
+export {}

+ 1 - 0
tsconfig.json

@@ -27,6 +27,7 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
+    "src/types/**/*.d.ts",
     "auto-imports.d.ts"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]