登录功能完成

.env.production

@@ -1 +1 @@
-VITE_APP_BASE_API = "http://172.16.20.3:5080/api"
+VITE_APP_BASE_API = "http://10.7.1.183:5080/api"

package-lock.json

@@ -2650,7 +2650,7 @@
     },
     "node_modules/swiper": {
       "version": "11.2.10",
-      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
       "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
       "funding": [
         {

src/router/index.js

@@ -1,56 +1,70 @@
 import { createRouter, createWebHistory } from "vue-router"
-
+import { useLoginStore } from "@/store/authentication/index"
 const routes = [
-  // { path: "/", redirect: "/home" },
+  { path: "/", redirect: "/home", meta: { requiresAuth: true } },
   {
     path: "/navigation",
-    component: () => import("@/views/Navigation/index.vue")
+    component: () => import("@/views/Navigation/index.vue"),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: "/login",
+    component: () => import("@/views/Login/index.vue"),
+    meta: { requiresAuth: false }
   },
-  { path: "/", redirect: "/home" },
-  { path: "/login", component: () => import("@/views/login/index.vue") },
   {
     path: "/home",
     component: () => import("@/layout/index.vue"),
     children: [
       {
         path: "/key-node-1",
-        component: () => import("@/views/KeyNodeDiscern/anchorRecommendation/index.vue")
+        component: () => import("@/views/KeyNodeDiscern/anchorRecommendation/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/key-node-2",
-        component: () => import("@/views/KeyNodeDiscern/opinionLeader/index.vue")
+        component: () => import("@/views/KeyNodeDiscern/opinionLeader/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/key-node-3",
-        component: () => import("@/views/KeyNodeDiscern/bridgeCommunication/index.vue")
+        component: () => import("@/views/KeyNodeDiscern/bridgeCommunication/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/link-prediction-1",
-        component: () => import("@/views/LinkPrediction/characterInteraction/index.vue")
+        component: () => import("@/views/LinkPrediction/characterInteraction/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/link-prediction-2",
-        component: () => import("@/views/LinkPrediction/socialGroups/index.vue")
+        component: () => import("@/views/LinkPrediction/socialGroups/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/link-prediction-3",
-        component: () => import("@/views/LinkPrediction/charactersHiddenInteraction/index.vue")
+        component: () => import("@/views/LinkPrediction/charactersHiddenInteraction/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/group-evolution-1",
-        component: () => import("@/views/GroupEvolution/groupIdentifyDiscovery/index.vue")
+        component: () => import("@/views/GroupEvolution/groupIdentifyDiscovery/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/group-evolution-2",
-        component: () => import("@/views/GroupEvolution/groupStructure/index.vue")
+        component: () => import("@/views/GroupEvolution/groupStructure/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/group-evolution-3",
-        component: () => import("@/views/GroupEvolution/groupMember/index.vue")
+        component: () => import("@/views/GroupEvolution/groupMember/index.vue"),
+        meta: { requiresAuth: true }
       },
       {
         path: "/group-evolution-4",
-        component: () => import("@/views/GroupEvolution/abnormalGroup/index.vue")
+        component: () => import("@/views/GroupEvolution/abnormalGroup/index.vue"),
+        meta: { requiresAuth: true }
       }
     ]
   }
@@ -61,4 +75,21 @@ const router = createRouter({
   routes
 })
 
+// // 全局前置守卫
+router.beforeEach((to, from, next) => {
+  const loginStore = useLoginStore()
+
+  // 如果目标路由需要登录且用户未登录
+  if (to.meta.requiresAuth && !loginStore.token) {
+    next("/login") // 跳转到登录页
+  }
+  // 如果用户已登录但尝试访问登录页
+  else if (to.path === "/login" && loginStore.token) {
+    next("/home") // 跳转到主页
+  }
+  // 其他情况正常放行
+  else {
+    next()
+  }
+})
 export default router

src/store/authentication/index.js

@@ -1,14 +1,21 @@
 import { defineStore } from "pinia"
 import { login } from "@/service/api/authentication"
+import cache from "@/utils/cache"
+import router from "@/router"
 import { ElMessage } from "element-plus"
+const TOKEN_KEY = "token"
 export const useLoginStore = defineStore("loginStore", {
   state: () => ({
-    token: ""
+    token: cache.getItem(TOKEN_KEY) ?? ""
   }),
   actions: {
     async loginForAccessToken(userInfo) {
       const res = await login(userInfo)
-      if (res.code != 200) ElMessage.error("账号或密码错误")
+      if (res.code != 200) return
+      this.token = res.data.accessToken
+      cache.setItem(TOKEN_KEY, res.data.accessToken)
+      ElMessage.success("登录成功!")
+      router.push("/navigation")
     }
   }
 })

src/utils/http.js

@@ -1,6 +1,7 @@
 import axios from "axios"
-import cache from "./http"
+import cache from "./cache"
 import { ElMessage } from "element-plus"
+import router from "@/router"
 
 // 创建axios实例
 const service = axios.create({
@@ -8,14 +9,15 @@ const service = axios.create({
   timeout: 10000 // 请求超时时间
 })
 
+//白名单
+const excludePath = new Set(["/login"])
 // 请求拦截器
 service.interceptors.request.use(
   (config) => {
-    // const token = cache.getItem("token")
+    const token = cache.getItem("token")
-    // const excludePath = new Set(["/login"])
+    if (!excludePath.has(config.url) && token && config.headers) {
-    // if (!excludePath.has(config.url) && token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`
-    //   config.headers.Authorization = `Bearer ${token}`
+    }
-    // }
     return config
   },
   (error) => {
@@ -39,14 +41,27 @@ service.interceptors.response.use(
 
       // 特殊状态码处理
       if (res.code === 401 || res.code === 403) {
-        // 跳转登录页或其他处理
+        // 若token过期，或者token无效，或者未找到token，对页面中需要认证的接口都有效，使得重新登录
+        import("@/store/authentication/index").then(({ useLoginStore }) => {
+          useLoginStore().token = ""
+        })
+        cache.removeItem("token")
+        router.push("/login")
       }
-      return Promise.reject(new Error(res.message || "Error"))
+      return res
+      // return Promise.reject(new Error(res.message || "Error"))
     } else {
       return res
     }
   },
   (error) => {
+    if (error.status == 401 || error.status == 403) {
+      cache.removeItem("token")
+      import("@/store/authentication/index").then(({ useLoginStore }) => {
+        useLoginStore().token = ""
+      })
+      router.push("/login")
+    }
     ElMessage({
       message: error.message,
       type: "error",

vite.config.js

@@ -16,7 +16,7 @@ export default defineConfig({
     open: true,
     proxy: {
       "/api": {
-        target: "http://172.16.20.3:5080",
+        target: "http://10.7.1.183:5080",
         changeOrigin: true
         // rewrite: (path) => path.replace(/^\/api/, "") //后端带了api/前缀的话就注释
       }