登录失效跳转修复

src/App.vue

@@ -43,7 +43,18 @@ onBeforeUnmount(() => {
 <template>
   <div class="screen-adapter">
     <div class="screen-adapter__inner" :style="adapterStyle">
-      <RouterView />
+      <n-loading-bar-provider>
+      <n-modal-provider>
+        <n-dialog-provider>
+          <n-message-provider>
+            <n-message-provider>
+              <provider-helper />
+              <router-view />
+            </n-message-provider>
+          </n-message-provider>
+        </n-dialog-provider>
+      </n-modal-provider>
+    </n-loading-bar-provider>
     </div>
   </div>
 </template>

src/components/ProviderHelper.vue

@@ -0,0 +1,21 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import { useLoadingBar, useMessage, useModal } from 'naive-ui'
+
+/**
+ * naive-ui的弹窗类的都没有提供全局方法, 这里挂载到window对象上
+ */
+export default {
+  name: 'ProviderHelper',
+  setup() {
+    window.$message = useMessage()
+    window.$loadingBar = useLoadingBar()
+    window.$modal = useModal()
+  }
+}
+</script>
+
+<style scoped></style>

src/main.ts

@@ -4,16 +4,12 @@ import App from "./App.vue";
 import Chart from "./components/chart/index.vue";
 import * as echarts from "echarts";
 import echartsConfig from "./config/echarts.config";
-import { createDiscreteApi } from "naive-ui";
 import { createPinia } from "pinia";
 import router from "./router";
+import './router/routerGuard'
 
 echarts.registerTheme("t-theme", echartsConfig);
 
-const { message, dialog } = createDiscreteApi(["message", "dialog"]);
-window.$message = message;
-window.$modal = dialog;
-
 const app = createApp(App);
 
 app.use(createPinia());

src/router/index.ts

@@ -75,21 +75,6 @@ const router = createRouter({
   routes,
 });
 
-const whiteList = ["/login"];
-
-router.beforeEach((to) => {
-  const hasToken = Boolean(getToken());
-
-  if (!hasToken && !whiteList.includes(to.path)) {
-    return {
-      path: "/login",
-      query: { redirect: to.fullPath },
-    };
-  }
-
-  return true;
-});
-
 export function resetRouter() {
   // 当前项目暂无动态 addRoute 路由，保留该方法兼容登出流程。
 }

src/router/routerGuard.js

@@ -0,0 +1,60 @@
+import router from './index'
+import { getToken } from '@/utils/auth'
+import { useUserStore } from '@/store/modules/user.js'
+
+const whiteList = ['/login'] // no redirect whitelist
+
+// const setPageTitle = function (meta) {
+//   let title = '海灵标'
+//   if (meta && meta.title) {
+//     title = `${meta.title}`
+//   }
+//   document.title = title
+// }
+// 路由守卫
+router.beforeEach(async (to, from, next) => {
+  $loadingBar.start()
+  // setPageTitle(to.meta)
+  const hasToken = getToken()
+  const userStore = useUserStore()
+  if (hasToken) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+      $loadingBar.finish()
+    } else {
+      const hasGetUserInfo = userStore.name
+      if (hasGetUserInfo !== '') {
+        next()
+      } else {
+        try {
+          // get user info
+          const infoVO = await userStore.getInfo()
+          next({ ...to, replace: true })
+        } catch (error) {
+          await userStore.resetToken()
+          next(`/login?redirect=${to.path}`)
+          // remove token and go to login page to re-login
+          console.error(error)
+          $loadingBar.error()
+        }
+      }
+    }
+  } else {
+    /* has no token */
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      next(`/login?redirect=${to.path}`)
+      $loadingBar.finish()
+    }
+  }
+})
+
+router.afterEach((to) => {
+  if (to.matched.length === 0) {
+    router.push('/404')
+    // fixme 不能自动跳转404, 需要引导
+  }
+  $loadingBar.finish()
+})

src/utils/request.js

@@ -58,9 +58,8 @@ service.interceptors.response.use(
           window.$message.error(error.response.data.msg, {
             duration: 5 * 1000,
           });
-        } else {
-          handleNoLogin();
         }
+        handleNoLogin();
       } else {
         handleNoLogin();
       }

src/views/dashboard1/pages/IntegratedCenterPage.vue

@@ -1624,19 +1624,19 @@ function getStatusClass(status: DeviceItem["status"]) {
         </div>
         <div class="video-panel">
           <div class="video-screen">
-            <img src="/image.png" alt="" class="monitor-video">
-            <!-- <video v-if="currentMonitorVideo" ref="monitorVideoRef" :key="currentMonitorVideo"
+            <!-- <img src="/image.png" alt="" class="monitor-video"> -->
+            <video v-if="currentMonitorVideo" ref="monitorVideoRef" :key="currentMonitorVideo"
               :class="['monitor-video', { infrared: activeCameraMode === 'infrared' }]" autoplay muted
-              playsinline></video> -->
+              playsinline></video>
             <div class="scan-line"></div>
-            <!-- <div class="video-overlay top-left">实时视频流</div>
+            <div class="video-overlay top-left">实时视频流</div>
             <div class="video-overlay top-right">
               {{ activeCameraMode === "white" ? "白光镜头" : "红外镜头" }}
-            </div> -->
+            </div>
             <div class="video-overlay bottom-left">{{ currentRobot.id }}</div>
-            <!-- <div v-if="streamLoading" class="video-empty">视频流连接中...</div>
+            <div v-if="streamLoading" class="video-empty">视频流连接中...</div>
             <div v-else-if="streamError" class="video-empty">{{ streamError }}</div>
-            <div v-else-if="!currentMonitorVideo" class="video-empty">当前机器人暂无视频地址</div> -->
+            <div v-else-if="!currentMonitorVideo" class="video-empty">当前机器人暂无视频地址</div>
           </div>
         </div>
       </div>