✨ feat: 路由2

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']

src/App.vue

@@ -1,15 +1,54 @@
+<style scoped lang="scss">
+.el-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--el-border-color);
+}
+.title-container {
+  font-size: 1.2em;
+}
+</style>
 <template>
+  <el-dialog></el-dialog>
+  <el-container>
+    <el-header height="50px">
+      <div class="logo-container">社团展示系统</div>
+      <div class="content">
+        <el-dropdown>
+          <el-icon :size="30"><icon-ep-avatar></icon-ep-avatar></el-icon>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :icon="Avatar">登录/注册</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
+  </el-container>
   <router-view />
 </template>
+<style scoped lang="scss">
+.el-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--el-border-color);
+}
+.title-container {
+  font-size: 1.2em;
+}
+</style>
 <script setup lang="ts">
 import { useBackgroundStore } from '@/stores';
-import { useRouter, useRoute } from 'vue-router';
-import axios from 'axios';
+import { Avatar } from '@element-plus/icons-vue';
+import { onBeforeMount, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import axiosInstance from './api';
 const backgroundStore = useBackgroundStore();
-import { onMounted } from 'vue';
-import { onBeforeMount } from 'vue';
 const router = useRouter();
-onBeforeMount(async () => {
-  router.addRoute({ path: '/', component: () => import('@/views/MainPage.vue') });
-});
+// onBeforeMount(async () => {
+//   // router.addRoute({ path: '/', component: () => import('@/views/MainPage.vue') });
+// });
+// onMounted(async () => {});
 </script>

src/api/index.ts

@@ -1,6 +1,19 @@
 import axios from 'axios';
-const instance = axios.create({
+import { useUserStore } from '@/stores';
+const axiosInstance = axios.create({
   baseURL: 'http://wzpmc.cn:18080/'
 });
-//TODO 拦截器
-export default instance;
+axiosInstance.interceptors.request.use((config) => {
+  const userStore = useUserStore();
+  config.headers.setAuthorization(userStore.token, false);
+  return config;
+});
+axiosInstance.interceptors.response.use((response) => {
+  const userStore = useUserStore();
+  const authorization = response.headers['Set-Authorization'] as string | undefined;
+  if (authorization !== undefined) {
+    userStore.token = authorization;
+  }
+  return response;
+});
+export default axiosInstance;

src/router/index.ts

@@ -1,3 +1,5 @@
+import axiosInstance from '@/api';
+import MainPage from '@/views/MainPage.vue';
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 type Route = RouteRecordRaw;
 const routes: Route[] = [];
@@ -5,4 +7,15 @@ const router = createRouter({
   history: createWebHistory(),
   routes: routes
 });
+let status = false;
+router.beforeEach(async (to) => {
+  console.log(2);
+  if (!status) {
+    const value = await axiosInstance.get('/api/user/info');
+    router.addRoute({ name: 'test', path: '/', component: MainPage });
+    status = true;
+    return to.fullPath;
+  }
+  return true;
+});
 export default router;

src/stores/index.ts

@@ -1,2 +1,3 @@
 export * from './background';
 export * from './2048';
+export * from './user'

src/stores/user.ts

@@ -0,0 +1,6 @@
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+export const useUserStore = defineStore('user', () => {
+  const token = useLocalStorage<string | null>('token', null);
+  return { token };
+});

src/views/MainPage.vue

@@ -1,34 +1,4 @@
-<template>
-  <div class="page-root">
-    <el-container>
-      <el-header height="50px">
-        <div class="logo-container">社团展示系统</div>
-        <div class="content">
-          <el-dropdown>
-            <el-icon :size="30"><icon-ep-avatar></icon-ep-avatar></el-icon>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item :icon="Avatar">登录/注册</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-          <!-- <el-avatar :size="30"></el-avatar> -->
-        </div>
-      </el-header>
-    </el-container>
-  </div>
-</template>
-<style scoped lang="scss">
-.el-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--el-border-color);
-}
-.title-container {
-  font-size: 1.2em;
-}
-</style>
+<template>test</template>
 
 <script setup lang="ts">
 import { Avatar } from '@element-plus/icons-vue';