update

.env

+VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index

.env.dev

+VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index

.env.test

+VITE_LOGIN_URL=https://login2.ezijing.com/auth/login/index

env.d.ts

 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_LOGIN_URL: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/api/base.ts

+import httpRequest from '@/utils/axios'
+
+// 获取用户信息
+export function getUser() {
+  return httpRequest.get('/api/passport/account/get-user-info')
+}
+
+// 退出登录
+export function logout() {
+  return httpRequest.get('/api/passport/rest/logout')
+}
+
+// 获取oss token
+export function getToken() {
+  return httpRequest.get('/api/usercenter/aliyun/assume-role')
+}
+
+// 获取oss signature
+export function getSignature() {
+  return httpRequest.get('/api/usercenter/aliyun/get-signature')
+}
+
+// 图片上传
+export function uploadFile(data: object) {
+  return httpRequest.post('https://webapp-pub.oss-cn-beijing.aliyuncs.com', data, {
+    withCredentials: false,
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}

src/components/layout/Header.vue

 <script setup lang="ts">
-// function logout() {
-//   // this.$store.dispatch('logout').then(() => {
-//   //   window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
-//   // })
-// }
+import { useUserStore } from '@/stores/user'
+
+const user = useUserStore()
+const LOGINURL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
+
+// 退出登录
+function handleLogout() {
+  user.logout().then(() => {
+    location.href = '/'
+  })
+}
 </script>
 
 <template>
@@ -15,7 +21,12 @@
         </div>
         <div class="app-name">紫荆教育SAAS平台</div>
       </div>
-      <div class="app-header-right"></div>
+      <div class="app-header-right">
+        <template v-if="user.isLogin">
+          你好，{{ user.userName }} <span class="app-header-logout" @click="handleLogout">退出</span>
+        </template>
+        <template v-else><a :href="LOGINURL">登录</a></template>
+      </div>
     </div>
   </header>
 </template>
@@ -57,63 +68,14 @@
 }
 .app-header-right {
   display: flex;
+  color: #666;
 
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-    &:hover {
-      background-color: rgba(60, 64, 67, 0.08);
-    }
-  }
-}
-.app-header-user {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 16px;
-}
-.app-header-user-avatar {
-  margin-bottom: 6px;
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  overflow: hidden;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-.app-header-user-main {
-  h3 {
-    color: #202124;
-    font: 500 16px/22px Helvetica, Arial, sans-serif;
-    letter-spacing: 0.29px;
-    margin: 0;
-    text-align: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  p {
-    color: #5f6368;
-    font: 400 14px/19px Helvetica, Arial, sans-serif;
-    letter-spacing: normal;
-    text-align: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  .app-header-logout {
+    background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;
+    background-size: auto 16px;
+    padding-left: 22px;
+    margin-left: 40px;
+    cursor: pointer;
   }
 }
-.app-header-user-buttons {
-  padding-top: 16px;
-}
 </style>

src/modules/home/index.js → src/modules/home/index.ts

+import type { RouteRecordRaw } from 'vue-router'
 import AppLayout from '@/components/layout/Index.vue'
 
-const routes = [
+const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     component: AppLayout,

src/modules/index.js

-const modules = Object.values(import.meta.globEager('./**/index.js'))
-
-export default function ({ router }) {
-  modules.forEach(({ routes }) => {
-    // 注册路由
-    routes.forEach(route => {
-      router.addRoute(route)
-    })
-  })
-}

src/modules/index.ts

+import type { Router } from 'vue-router'
+import type { Module } from '@/types'
+
+export default function ({ router }: { router: Router }) {
+  const modules: Array<Module> = Object.values(import.meta.globEager('./**/index.ts'))
+  modules.forEach(({ routes = [] }) => {
+    // 注册路由
+    routes.forEach(route => {
+      router.addRoute(route)
+    })
+  })
+}

src/router/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/user'
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/:pathMatch(.*)*', redirect: '/' }]
 })
 
+router.beforeEach((to, from, next) => {
+  const user = useUserStore()
+  user.getUser()
+  next()
+})
+
 export default router

src/stores/counter.ts

-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore({
-  id: 'counter',
-  state: () => ({
-    counter: 0
-  }),
-  getters: {
-    doubleCount: (state) => state.counter * 2
-  },
-  actions: {
-    increment() {
-      this.counter++
-    }
-  }
-})

src/stores/user.ts

+import { defineStore } from 'pinia'
+import { getUser, logout } from '@/api/base'
+
+import type { UserState } from '@/types'
+
+export const useUserStore = defineStore({
+  id: 'user',
+  state: () => {
+    return {
+      user: null as UserState | null
+    }
+  },
+  getters: {
+    isLogin: state => !!state.user,
+    userName: ({ user }) => {
+      if (!user) return ''
+      return user.realname || user.nickname || user.username || ''
+    }
+  },
+  actions: {
+    getUser() {
+      return getUser().then(res => {
+        this.user = res.data
+      })
+    },
+    logout() {
+      return logout().then(() => {
+        this.user = null
+      })
+    }
+  }
+})

src/types.ts

+import type { RouteRecordRaw } from 'vue-router'
+
+export interface UserState {
+  id: string
+  avatar: string
+  mobile: string
+  realname: string
+  nickname: string
+  username: string
+}
+
+export interface Module {
+  routes: Array<RouteRecordRaw>
+}

src/utils/axios.js → src/utils/axios.ts

 import axios from 'axios'
 
 const httpRequest = axios.create({
+  baseURL: 'https://learn-api.ezijing.com',
   timeout: 60000,
   withCredentials: true
 })
+
 // 响应拦截
 httpRequest.interceptors.response.use(
   function (response) {

tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "lib": ["DOM", "ESNext"]
   },
 
   "references": [

tsconfig.vite-config.json

@@ -3,6 +3,6 @@
   "include": ["vite.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node", "vitest"]
+    "types": ["node"]
   }
 }