封装request

.eslintrc.cjs

@@ -1,15 +1,18 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require("@rushstack/eslint-patch/modern-module-resolution")
 
 module.exports = {
-  "root": true,
-  "extends": [
+  root: true,
+  extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier"
+    "@vue/eslint-config-prettier",
   ],
-  "parserOptions": {
-    "ecmaVersion": "latest"
-  }
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  rules: {
+    semi: [2, "never"],
+  },
 }

src/components.d.ts

@@ -16,7 +16,6 @@ declare module '@vue/runtime-core' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
@@ -25,33 +24,16 @@ declare module '@vue/runtime-core' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Exception: typeof import('./components/Exception.vue')['default']
     GlobalFooter: typeof import('./components/GlobalFooter.vue')['default']
     GlobalHeader: typeof import('./components/GlobalHeader.vue')['default']
     GlobalMenu: typeof import('./components/GlobalMenu.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./components/icons/IconTooling.vue')['default']
-    'IEp-Menu': typeof import('~icons/ep/-menu')['default']
     IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
-    IEpDocument: typeof import('~icons/ep/document')['default']
-    IEpLocation: typeof import('~icons/ep/location')['default']
-    IEpLock: typeof import('~icons/ep/lock')['default']
-    IEpMenu: typeof import('~icons/ep/menu')['default']
-    IEpSetting: typeof import('~icons/ep/setting')['default']
-    IEpUser: typeof import('~icons/ep/user')['default']
     ProTable: typeof import('./components/ProTable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./components/WelcomeItem.vue')['default']
   }
 }

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/utils/request.ts

@@ -0,0 +1,47 @@
+import axios from 'axios'
+import { useUserStore } from '@/stores/user'
+import router from '@/router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const request = axios.create({
+  baseURL: '/api',
+})
+
+// 异常拦截处理器
+const errorHandler = (error: any) => {
+  const status = error.response.status
+  if (status === 401) {
+    ElMessageBox.confirm(
+      '当前用户无权限访问当前资源，请尝试重新登录后再操作。',
+      '无权限访问',
+      {
+        type: 'error',
+        closeOnClickModal: false,
+        center: true,
+        confirmButtonText: '重新登录',
+      }
+    ).then(() => {
+      router.replace({ path: '/login' })
+    })
+  } else if (status === 403) {
+    ElMessage.error('无权限访问')
+  }
+  return Promise.reject(error.response)
+};
+
+request.interceptors.request.use(config => {
+  const userStore = useUserStore()
+  const token = userStore.token
+
+  if (token) {
+    config.headers!.Authorization = token
+  }
+
+  return config
+})
+
+request.interceptors.response.use(res => {
+  return res.data
+}, errorHandler)
+
+export default request

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '@/components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

vite.config.ts

@@ -46,6 +46,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: "",
+        changeOrigin: true,
+      },
+    },
+  },
   build:{
     terserOptions: {
       //打包后移除console和注释