9-11 增加路由登录拦截，未登录时跳到首页

web/src/router/index.ts

@@ -6,6 +6,9 @@ import AdminCategory from '../views/admin/admin-category.vue'
 import AdminDoc from '../views/admin/admin-doc.vue'
 import AdminUser from '../views/admin/admin-user.vue'
 import Doc from '../views/doc.vue'
+import store from '@/store'
+import {Tool} from "@/util/tool";
+
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -26,22 +29,34 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/admin/user',
     name: 'AdminUser',
-    component: AdminUser
+    component: AdminUser,
+    meta: {
+      loginRequire: true
+    }
   },
   {
     path: '/admin/ebook',
     name: 'AdminEbook',
-    component: AdminEbook
+    component: AdminEbook,
+    meta: {
+      loginRequire: true
+    }
   },
   {
     path: '/admin/category',
     name: 'AdminCategory',
-    component: AdminCategory
+    component: AdminCategory,
+    meta: {
+      loginRequire: true
+    }
   },
   {
     path: '/admin/doc',
     name: 'AdminDoc',
-    component: AdminDoc
+    component: AdminDoc,
+    meta: {
+      loginRequire: true
+    }
   }
 ]
 
@@ -50,4 +65,29 @@ const router = createRouter({
   routes
 })
 
+/**
+ * 路由登录拦截
+ * :param: to  所要进入的 URL
+ * :param: from  来自的 URL
+ * :param: next  用户接下来所要进入的 URL
+ */
+router.beforeEach((to, from, next) => {
+  // 要不要对meta.loginRequire属性做监控拦截
+  if (to.matched.some(function (item) {
+    console.log(item, "是否需要登录校验：", item.meta.loginRequire);
+    return item.meta.loginRequire
+  })) {
+    const localUser = store.state.localUser;  // 上面部分验证通过的话则进入这块逻辑
+    if (Tool.isEmpty(localUser)) {
+      console.log("用户未登录！");
+      next('/');  // 如果用户未登录，则跳转至首页
+    } else {
+      next();  // 登录的话则继续访问
+    }
+  } else {
+    next();
+  }
+});
+
+
 export default router