feat: 全局鉴权看板

src/api/auth/auth.ts

@@ -0,0 +1,8 @@
+import { http } from '@/utils/http/axios';
+
+export const getAuthValid = () => {
+  return http.request({
+    url: '/onplay/justAuth',
+    method: 'get',
+  });
+};

src/components/InvalidAuth/InvalidAuth.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="auth-message-page" v-if="!isAuthValid">
+    <div class="back-mask"></div>
+    <div class="auth-kanban">
+      <div class="auth-content">
+        <el-icon class="auth-icon" size="24px"><WarningFilled /></el-icon>
+        <div class="auth-text">登录信息已过期，请重新登录？</div>
+      </div>
+      <div style="display: flex; justify-content: end">
+        <el-button @click="isAuthValid = true">取消</el-button>
+        <el-button type="primary" @click="handleClick">确定</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { WarningFilled } from '@element-plus/icons-vue';
+  import useAuthStore from '@/store/modules/useAuth';
+  import { storeToRefs } from 'pinia';
+  import { getRedirectUrl } from '@/utils/getRedirectUrl';
+
+  const authStore = useAuthStore();
+  const { isAuthValid } = storeToRefs(authStore);
+
+  const handleClick = () => {
+    // 跳转登录页面
+    window.location.href = getRedirectUrl();
+  };
+</script>
+
+<style scoped>
+  .auth-message-page {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2008;
+  }
+
+  .back-mask {
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .auth-kanban {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 420px;
+    width: 100%;
+    padding: 12px;
+    vertical-align: middle;
+    background-color: #ffffff;
+    border-radius: 4px;
+    font-size: 18px;
+    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    text-align: left;
+    overflow: hidden;
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+  }
+
+  .auth-content {
+    display: flex;
+    align-items: center;
+    color: #606266;
+    font-size: 14px;
+    margin: 12px 0;
+  }
+
+  .auth-icon {
+    color: #e6a23c;
+  }
+
+  .auth-text {
+    margin-left: 10px;
+  }
+</style>

src/components/LiveVideo/LiveVideo.vue

@@ -15,12 +15,14 @@
   import mpegts from 'mpegts.js';
   import { useUserStore } from '@/store/modules/user';
   import { storeToRefs } from 'pinia';
-  import { ElMessageBox } from 'element-plus';
-  import { getRedirectUrl } from '@/utils/getRedirectUrl';
+  import useAuthStore from '@/store/modules/useAuth';
 
   const userStore = useUserStore();
   const { token } = storeToRefs(userStore);
 
+  const authStore = useAuthStore();
+  const { checkAuthValid } = authStore;
+
   const restartNum = ref(0);
 
   let isVideoLoadingFailed = ref(false);
@@ -72,18 +74,7 @@
       console.log('视频加载错误类型', e);
       console.log('视频加载错误详情类型', detail);
       console.log('视频加载错误信息', data);
-      if (data.code === 401 && data.msg == 'Unauthorized') {
-        ElMessageBox.confirm('登录信息已过期，请重新登录？', {
-          confirmButtonText: '确认',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            // 跳转登录页面
-            window.location.href = getRedirectUrl();
-          })
-          .catch(() => {});
-      }
+      checkAuthValid();
       // 当发生error时，这里会发生死循环，所以要注销掉。 interval方式中已经包含了此种错误的处理
       // reloadPlayer();
     });

src/layout/index.vue

@@ -62,6 +62,8 @@
     </div>
 
     <div class="admin-layout-shade"></div>
+
+    <InvalidAuth />
   </div>
 
   <!--项目配置-->
@@ -91,6 +93,7 @@
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { SettingOutlined } from '@vicons/antd';
   import Sider from './components/Sider/Sider.vue';
+  import InvalidAuth from '@/components/InvalidAuth/InvalidAuth.vue';
 
   const { getDarkTheme } = useDesignSetting();
   const {

src/store/modules/useAuth.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import { getAuthValid } from '@/api/auth/auth';
+import { ref } from 'vue';
+
+export const useAuthStore = defineStore('auth', () => {
+  const isAuthValid = ref(true);
+
+  const checkAuthValid = () => {
+    return getAuthValid().then((res) => {
+      isAuthValid.value = res;
+    });
+  };
+
+  return { isAuthValid, checkAuthValid };
+});
+
+export default useAuthStore;