feat: 完善图片获取逻辑

.env.development

@@ -17,6 +17,3 @@ VITE_GLOB_API_URL=/api
 
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/storage/file
-
-# Interface prefix
-VITE_GLOB_API_URL_PREFIX=

.env.production

@@ -22,9 +22,6 @@ VITE_GLOB_API_URL=/api
 # It can be forwarded by nginx or write the actual address directly
 VITE_GLOB_UPLOAD_URL=/storage/file
 
-# Interface prefix
-VITE_GLOB_API_URL_PREFIX=
-
 # Whether to enable image compression
 VITE_USE_IMAGEMIN= true
 
@@ -32,4 +29,4 @@ VITE_USE_IMAGEMIN= true
 VITE_USE_PWA = false
 
 # Is it compatible with older browsers
-VITE_LEGACY = false
+VITE_LEGACY = false

.env.test

@@ -23,9 +23,6 @@ VITE_GLOB_API_URL=/api
 # It can be forwarded by nginx or write the actual address directly
 VITE_GLOB_UPLOAD_URL=/storage/file
 
-# Interface prefix
-VITE_GLOB_API_URL_PREFIX=
-
 # Whether to enable image compression
 VITE_USE_IMAGEMIN= true
 
@@ -33,4 +30,4 @@ VITE_USE_IMAGEMIN= true
 VITE_USE_PWA = false
 
 # Is it compatible with older browsers
-VITE_LEGACY = false
+VITE_LEGACY = false

src/hooks/setting/index.ts

@@ -8,7 +8,6 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_APP_TITLE,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL
   } = getAppEnvConfig();
 
@@ -23,7 +22,6 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     title: VITE_GLOB_APP_TITLE,
     apiUrl: VITE_GLOB_API_URL,
     shortName: VITE_GLOB_APP_SHORT_NAME,
-    urlPrefix: VITE_GLOB_API_URL_PREFIX,
     uploadUrl: VITE_GLOB_UPLOAD_URL
   };
   return glob as Readonly<GlobConfig>;

src/layouts/default/header/components/lock/LockModal.vue

@@ -33,6 +33,7 @@ import { BasicForm, useForm } from "/@/components/Form/index";
 import { useUserStore } from "/@/store/modules/User";
 import { useLockStore } from "/@/store/modules/Lock";
 import headerImg from "/@/assets/images/header.png";
+import { imageUrl } from "/@/utils/http/image/ImageRequest";
 
 export default defineComponent({
   name: "LockModal",
@@ -75,7 +76,7 @@ export default defineComponent({
     }
 
     const avatar = computed(() => {
-      return userStore.getUserInfo?.headImgUrl || headerImg;
+      return imageUrl("/storage/file/" + userStore.getUserInfo?.headImgUrl) || headerImg;
     });
 
     return {

src/layouts/default/header/components/user-dropdown/index.vue

@@ -48,7 +48,7 @@
 <script lang="ts">
 import { Dropdown, Menu } from "ant-design-vue";
 import type { MenuInfo } from "ant-design-vue/lib/menu/src/interface";
-import { computed,unref } from "vue";
+import { computed, unref } from "vue";
 import { DOC_URL } from "/@/settings/SiteSetting";
 import { useUserStore } from "/@/store/modules/User";
 import { useHeaderSetting } from "/@/hooks/setting/UseHeaderSetting";
@@ -61,6 +61,7 @@ import { openWindow } from "/@/utils";
 import { createAsyncComponent } from "/@/utils/factory/CreateAsyncComponent";
 import PasswordModal from "/@/views/sys/account/PasswordModal.vue";
 import { useGo } from "/@/hooks/web/UsePage";
+import { imageUrl } from "/@/utils/http/image/ImageRequest";
 
 type MenuEvent = "logout" | "doc" | "lock" | "changePwd" | "userInfo";
 
@@ -84,7 +85,7 @@ export default {
     const userStore = useUserStore();
     const getUserInfo = computed(() => {
       const { nickname = "", headImgUrl, id } = userStore.getUserInfo || {};
-      return { nickname, headImgUrl: "/api/storage/file/"+headImgUrl || headerImg, id };
+      return { nickname, headImgUrl: imageUrl("/storage/file/" + headImgUrl) || headerImg, id };
     });
     const [register, { openModal }] = useModal();
     const [registerPwd, { openModal: openPwdModal }] = useModal();
@@ -123,7 +124,7 @@ export default {
           changePwd();
           break;
         case "userInfo":
-          go("/system/account/setting")
+          go("/system/account/setting");
           break;
       }
     }

src/utils/Env.ts

@@ -20,7 +20,6 @@ export function getAppEnvConfig() {
     VITE_GLOB_APP_TITLE,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL
   } = ENV;
 
@@ -34,7 +33,6 @@ export function getAppEnvConfig() {
     VITE_GLOB_APP_TITLE,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
     VITE_GLOB_UPLOAD_URL
   };
 }

src/utils/http/axios/Axios.ts

@@ -180,7 +180,6 @@ export class VAxios {
     }
     conf.requestOptions = opt;
     conf = this.supportFormData(conf);
-    console.log(conf,"请求配置");
     return new Promise((resolve, reject) => {
       this.axiosInstance
         .request<any, AxiosResponse<Result>>(conf)

src/utils/http/axios/index.ts

@@ -17,8 +17,6 @@ import { useUserStoreWithOut } from "/@/store/modules/User";
 import { AxiosRetry } from "/@/utils/http/axios/AxiosRetry";
 
 const globSetting = useGlobSetting();
-const urlPrefix = globSetting.urlPrefix;
-
 
 /**
  * @description: 数据处理，方便区分多种处理方式
@@ -75,10 +73,7 @@ const transform: AxiosTransform = {
    * @param options
    */
   beforeRequestHook: (config, options) => {
-    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
-    if (joinPrefix) {
-      config.url = `${urlPrefix}${config.url}`;
-    }
+    const { apiUrl, joinParamsToUrl, formatDate, joinTime = true } = options;
     if (apiUrl && isString(apiUrl)) {
       config.url = `${apiUrl}${config.url}`;
     }
@@ -198,8 +193,6 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           errorMessageMode: "message",
           // 接口地址
           apiUrl: globSetting.apiUrl,
-          // 接口拼接地址
-          urlPrefix: urlPrefix,
           //  是否加入时间戳
           joinTime: true,
           // 忽略重复请求

src/utils/http/image/ImageRequest.ts

@@ -0,0 +1,29 @@
+import { useGlobSetting } from "/@/hooks/setting";
+import { isString } from "/@/utils/Is";
+import { getToken } from "/@/utils/auth";
+
+/**
+ * @description: 图片请求
+ * @author: qiufeng
+ * @date: 2023/1/6 21:14
+ */
+const globSetting = useGlobSetting();
+
+/**
+ * 获取图片url自动添加token防止图片无权限获取
+ * @param url
+ */
+export const imageUrl = (url) => {
+  const { apiUrl } = globSetting;
+  const token = getToken();
+  if (apiUrl && isString(apiUrl)) {
+    url = `${apiUrl}${url}`;
+  }
+  if (url.indexOf("?") >= 0) {
+    url += "&";
+  } else {
+    url += "?";
+  }
+  url += `access_token=${token}`;
+  return url;
+};

src/views/sys/account/setting/BaseSetting.vue

@@ -36,6 +36,7 @@ import { getUserInfo, updateUser } from "/@/api/sys/User";
 import { baseSetSchemas } from "./setting.data";
 import { useUserStore } from "/@/store/modules/User";
 import { uploadApi } from "/@/api/sys/Upload";
+import { imageUrl } from "/@/utils/http/image/ImageRequest";
 
 export default defineComponent({
   components: {
@@ -63,14 +64,14 @@ export default defineComponent({
     });
 
     const avatar = computed(() => {
-      return "/api/storage/file/"+userStore.getUserInfo?.headImgUrl || headerImg;
+      return imageUrl("/storage/file/" + userStore.getUserInfo?.headImgUrl) || headerImg;
     });
 
     function updateAvatar({ data }) {
       if (userInfo != null) {
-        userInfo.headImgUrl = data
+        userInfo.headImgUrl = data;
         userStore.setUserInfo(userInfo);
-        if(data){
+        if (data) {
           updateUser(userInfo).then();
         }
       }

types/axios.d.ts

@@ -10,12 +10,8 @@ export interface RequestOptions {
   // Whether to return native response headers
   // For example: use this attribute when you need to get the response headers
   isReturnNativeResponse?: boolean;
-  // Whether to join url
-  joinPrefix?: boolean;
   // Interface address, use the default apiUrl if you leave it blank
   apiUrl?: string;
-  // 请求拼接路径
-  urlPrefix?: string;
   // Error message prompt type
   errorMessageMode?: MessageMode;
   //成功信息弹窗模式

types/config.d.ts

@@ -19,8 +19,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_APP_TITLE: string;
   // Service interface url
   VITE_GLOB_API_URL: string;
-  // Service interface url prefix
-  VITE_GLOB_API_URL_PREFIX?: string;
   // Project abbreviation
   VITE_GLOB_APP_SHORT_NAME: string;
   // Upload url
@@ -33,8 +31,6 @@ export interface GlobConfig {
   title: string;
   // Service interface url
   apiUrl: string;
-  //  Service interface url prefix
-  urlPrefix?: string;
   // Project abbreviation
   shortName: string;
   // Upload url