feat: 流鉴权

src/components/LiveVideo/LiveVideo.vue

@@ -13,6 +13,14 @@
 <script setup lang="ts">
   import { onMounted, onBeforeUnmount, watch, ref, computed } from 'vue';
   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';
+
+  const userStore = useUserStore();
+  const { token } = storeToRefs(userStore);
+
   const restartNum = ref(0);
 
   let isVideoLoadingFailed = ref(false);
@@ -45,7 +53,7 @@
         type: 'flv',
         isLive: true,
         hasAudio: false,
-        url: props.url,
+        url: props.url + '?token=' + token.value,
       },
       {
         liveBufferLatencyChasing: true,
@@ -60,8 +68,22 @@
     player.on(mpegts.Events.MEDIA_INFO, () => {
       console.log('视频开始播放');
     });
-    player.on(mpegts.Events.ERROR, (e) => {
-      console.log('视频加载错误', e);
+    player.on(mpegts.Events.ERROR, (e, detail, data) => {
+      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(() => {});
+      }
       // 当发生error时，这里会发生死循环，所以要注销掉。 interval方式中已经包含了此种错误的处理
       // reloadPlayer();
     });