✨ feat(用户 期刊): 期刊图片上传携带key

src/utils/request.js

@@ -1,75 +1,84 @@
 /*
- * @Description: 
+ * @Description:
  * @version: v1
  * @Author: zhangjiabao
  * @Date: 2024-01-02 21:12:35
  */
-import axios from 'axios'
+import axios from "axios";
-import { Message, MessageBox } from 'element-ui'
+import { Message, MessageBox } from "element-ui";
-import store from '../store'
+import store from "../store";
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
 
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
   timeout: 15000 // 请求超时时间
-})
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
+service.interceptors.request.use(
-  if (store.getters.token) {
+  config => {
-    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    if (store.getters.token) {
-    config.headers['Admin-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      // TODO: 此处三个token-key是冗余的 待后端统一后修改
+      config.headers["X-Token"] = getToken();
+      config.headers["Admin-Token"] = getToken();
+      config.headers["Authorization"] = getToken();
+    }
+    return config;
+  },
+  error => {
+    // Do something with request error
+    console.log(error); // for debug
+    Promise.reject(error);
   }
-  return config
+);
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
 
 // respone拦截器
 service.interceptors.response.use(
   response => {
-  /**
+    /**
-  * code为非20000是抛错 可结合自己业务进行修改
+     * code为非20000是抛错 可结合自己业务进行修改
-  */
+     */
-    const res = response.data
+    const res = response.data;
     // TODO: 关于code的逻辑需要重写
-    return response.data
+    return response.data;
     if (!(res.code == 2000 || res.code == 200)) {
       Message({
         message: res.message,
-        type: 'error',
+        type: "error",
         duration: 5 * 1000
-      })
+      });
 
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        MessageBox.confirm(
-          confirmButtonText: '重新登录',
+          "你已被登出，可以取消继续留在该页面，或者重新登录",
-          cancelButtonText: '取消',
+          "确定登出",
-          type: 'warning'
+          {
-        }).then(() => {
+            confirmButtonText: "重新登录",
-          store.dispatch('FedLogOut').then(() => {
+            cancelButtonText: "取消",
-            location.reload()// 为了重新实例化vue-router对象 避免bug
+            type: "warning"
-          })
+          }
-        })
+        ).then(() => {
+          store.dispatch("FedLogOut").then(() => {
+            location.reload(); // 为了重新实例化vue-router对象 避免bug
+          });
+        });
       }
-      return Promise.reject('error')
+      return Promise.reject("error");
     } else {
-      return response.data
+      return response.data;
     }
   },
   error => {
-    console.log('err' + error)// for debug
+    console.log("err" + error); // for debug
     Message({
       message: error.message,
-      type: 'error',
+      type: "error",
       duration: 5 * 1000
-    })
+    });
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;

src/views/article/articleModify.vue

@@ -2,7 +2,7 @@
  * @Author: zhangjiabao
  * @Date: 2024-01-24 10:09:33
  * @LastEditors: zhangjiabao
- * @LastEditTime: 2024-01-30 13:41:15
+ * @LastEditTime: 2024-02-04 11:15:32
  * @FilePath: /luoo_manage_fe/src/views/article/articleModify.vue
 -->
 <!--
@@ -70,6 +70,7 @@
         <img style="width: 170px;height: 120px;" :src="data.image" />
         <el-upload
           :action="`${uploadBase}/luoo-music/cms/journal/upload/image`"
+          :headers="uploadHeader"
           :on-preview="handlePreview"
           :on-remove="handleRemove"
           :before-remove="beforeRemove"
@@ -331,6 +332,7 @@
 </template>
 
 <script>
+import { getToken } from "@/utils/auth";
 import musicApi from "@/api/musicV2";
 import MusicModify from "../song/musicModify.vue";
 import Sortable from "sortablejs";
@@ -367,6 +369,11 @@ export default {
   },
   data() {
     return {
+      uploadHeader: {
+        "Admin-Token": getToken(),
+        "X-Token": getToken(),
+        Authorization: getToken()
+      },
       uploadBase: process.env.BASE_API,
       selectTag: [],
       lyricDialog: {

src/views/song/musicModify.vue

@@ -46,6 +46,7 @@
         />
         <el-upload
           :action="`${uploadBase}/luoo-music/cms/journal/upload/image`"
+          :headers="uploadHeader"
           :on-preview="handlePreview"
           :on-remove="handleRemove"
           :before-remove="beforeRemove"
@@ -70,6 +71,8 @@
   </div>
 </template>
 <script>
+import { getToken } from "@/utils/auth";
+
 export default {
   name: "MusicModify",
   props: {
@@ -99,6 +102,11 @@ export default {
   },
   data() {
     return {
+      uploadHeader: {
+        "Admin-Token": getToken(),
+        "X-Token": getToken(),
+        Authorization: getToken()
+      },
       uploadBase: process.env.BASE_API,
       selectTag: [],
       rules: {},