解决重复跳转login的bug

src/router.js

@@ -34,7 +34,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-    mode: 'history', 
+    mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
@@ -42,15 +42,20 @@ const router = new VueRouter({
 // 路由守卫，当访问需要登录的页面时，检查是否有token，如果没有则跳转到登录页
 router.beforeEach((to, from, next) => {
     const token = store.state.token;
-    if(to.meta.requiresAuth) {
-        // 加入/login判断，防止vue-router报错
-        if(!token && to.path !== "/login") {
-            next('/login')
-            return
-        } else {
-            next()
-            return
+    if (to.meta.requiresAuth) {
+        // 登录页直接放行
+        if (to.path === "/login") {
+            next();
+            return;
         }
+
+        // 其他页面没有 token，不允许进入
+        if (!token) {
+            next("/login");
+            return;
+        }
+
+        next();
     } else {
         next()
     }

src/utils/request.js

@@ -1,5 +1,27 @@
 import axios from 'axios';
 import store from '../store';
+import router from '../router';
+
+let redirectingToLogin = false;
+
+function redirectToLogin() {
+  if (redirectingToLogin || router.currentRoute.path === '/login') {
+    return;
+  }
+
+  redirectingToLogin = true;
+  router.replace('/login').then(
+    () => {
+      redirectingToLogin = false;
+    },
+    (navigationError) => {
+      redirectingToLogin = false;
+      if (navigationError.name !== 'NavigationDuplicated') {
+        console.error(navigationError);
+      }
+    }
+  );
+}
 
 // 配置请求
 const request = axios.create({
@@ -29,9 +51,10 @@ request.interceptors.response.use(
   },
   (error) => {
     if (error.response && error.response.status === 401) {
-      // 如果返回401，说明token过期或无效，清除token
+      // 如果返回401，说明token过期或无效，清除token并跳转到登录页
       store.commit('SET_TOKEN', '');
       store.commit('SET_USERNAME', '');
+      redirectToLogin();
     }
     return Promise.reject(error);
   }