完善userStore

src/api/user.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function login(data: any) {
+  return request.post('/getAccessToken', data)
+}
+
+export function getUserInfo() {
+  return request.get('/v1/user/profile/query')
+}

src/components/GlobalHeader.vue

@@ -3,6 +3,7 @@ import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
 import logo from '@/assets/logo.png'
 
+// 菜单收缩展开切换
 const menuStore = useMenuStore()
 const [value, toggle] = useToggle()
 const handleToggle = () => {
@@ -10,6 +11,9 @@ const handleToggle = () => {
   menuStore.setCollapse(value.value)
 }
 
+// 全屏切换
+const { toggle: toggleScreen, isFullscreen } = useFullscreen()
+
 const userStore = useUserStore()
 const user = userStore.user
 </script>
@@ -28,10 +32,14 @@ const user = userStore.user
         </el-button>
       </el-space>
       <div class="flex items-center">
-        <el-avatar class="mr-10px"></el-avatar>
+        <el-button link @click="toggleScreen" class="mr-4">
+          <icon-off-screen size="22" v-if="isFullscreen" />
+          <icon-full-screen size="22" v-else />
+        </el-button>
+        <el-avatar class="mr-10px" :src="user.photo"></el-avatar>
         <el-dropdown>
           <span class="el-dropdown-link">
-            {{ user.username }}
+            {{ user.name }}
             <el-icon class="el-icon--right">
               <i-ep-arrow-down />
             </el-icon>

src/components/ProTable.vue

@@ -100,8 +100,9 @@ const handlePatchDelete = () => {}
 
 const dialogTitle = ref('新建')
 const dialogVisible = ref(false)
-const beforeClose = () => {
-  console.log('object')
+
+const closeDialog = () => {
+  dialogVisible.value = false
   formData.value = {}
 }
 
@@ -125,7 +126,7 @@ const submit = () => {
           type: 'success',
           message
         })
-        dialogVisible.value = false
+        closeDialog()
       }
     }
   })
@@ -180,7 +181,7 @@ const submit = () => {
       </div>
     </el-card>
 
-    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" width="1000px" :before-close="beforeClose">
+    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" width="1000px" @close="closeDialog">
       <el-form :model="formData" ref="formRef" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12" v-for="item in columns">
@@ -196,10 +197,8 @@ const submit = () => {
       </el-form>
 
       <template #footer>
-        <span>
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submit">保存</el-button>
-        </span>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit">保存</el-button>
       </template>
     </el-dialog>
   </div>

src/router/asyncRouter.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-const asyncRouter:RouteRecordRaw[] = [
+const asyncRouter: RouteRecordRaw[] = [
   {
     path: '/home',
     name: 'home',
@@ -30,7 +30,7 @@ const asyncRouter:RouteRecordRaw[] = [
       {
         path: 'user',
         name: 'systemUser',
-        component: () => import('@/views/system/user.vue'),
+        component: () => import('@/views/system/User.vue'),
         meta: {
           title: '用户管理',
           icon: 'icon-user'
@@ -39,14 +39,14 @@ const asyncRouter:RouteRecordRaw[] = [
       {
         path: 'menu',
         name: 'systemMenu',
-        component: () => import('@/views/system/menu.vue'),
+        component: () => import('@/views/system/Menu.vue'),
         meta: {
           title: '菜单管理',
           icon: 'icon-menu'
         }
-      },
+      }
     ]
-  },
+  }
 ]
 
-export default asyncRouter
+export default asyncRouter

src/router/constantRouter.ts

@@ -2,17 +2,18 @@ import BlankLayout from '@/layouts/BlankLayout.vue'
 import BasicLayout from '@/layouts/BasicLayout.vue'
 import type { RouteRecordRaw } from 'vue-router'
 
-const constantRouter:RouteRecordRaw[] = [
+const constantRouter: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'layout',
     component: BasicLayout,
+    redirect: '/home',
     children: []
   },
   {
     path: '/login',
     name: 'login',
-    component: () => import('@/views/user/Login.vue'),
+    component: () => import('@/views/user/Login.vue')
   },
   {
     path: '/:pathMatch(.*)*',
@@ -49,10 +50,10 @@ const constantRouter:RouteRecordRaw[] = [
       {
         path: '500',
         name: '500',
-        component: () => import('@/views/exception/404.vue'),
-      },
+        component: () => import('@/views/exception/404.vue')
+      }
     ]
-  },
+  }
 ]
 
-export default constantRouter
+export default constantRouter

src/router/guard.ts

@@ -11,16 +11,16 @@ const title = useTitle()
 const createRouterGuard = (router: Router) => {
   router.beforeEach(async (to, from) => {
     const userStore = useUserStore()
+    const token = userStore.token
 
     NProgress.start()
-    if (to?.meta?.title) {
-      title.value = to?.meta?.title
+    if (to.meta?.title) {
+      title.value = to.meta?.title
     }
-    const token = userStore.token
 
     if (token) {
       if (to.path === '/login') {
-        return '/home'
+        return from.path
       } else {
         const routerStore = useRouterStore()
         if (!userStore.flag) {

src/stores/counter.ts

@@ -1,16 +0,0 @@
-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

@@ -1,23 +1,29 @@
 import router from '@/router'
+import { login, getUserInfo } from '@/api/user'
 
 export const useUserStore = defineStore({
   id: 'user',
   state: () => ({
     user: {},
     flag: false,
-    token: 't'
+    token: localStorage.getItem('token') || ''
   }),
   actions: {
     getUserInfo() {
       this.flag = true
     },
-    login() {
-      this.token = 'test'
-      useStorage('token', 'test')
-      console.log(useStorage('token', 'test'))
+    async login(data: any) {
+      const res: any = await login(data)
+      this.token = res.accessToken
+      localStorage.setItem('token', this.token)
+
+      const userRes: any = await getUserInfo()
+      this.user = userRes.infos[0]
+
       router.replace({ path: '/home' })
     },
     logout() {
+      localStorage.removeItem('token')
       this.$reset()
       router.push({ path: '/login' })
     }

src/utils/request.ts

@@ -4,31 +4,35 @@ import router from '@/router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const request = axios.create({
-  baseURL: '/api',
+  baseURL: '/api'
 })
 
 // 异常拦截处理器
 const errorHandler = (error: any) => {
   const status = error.response.status
+  const data = error.response.data
   const userStore = useUserStore()
 
-  if (status === 401) {
-    ElMessageBox.confirm(
-      '当前用户无权限访问当前资源，请尝试重新登录后再操作。',
-      '无权限访问',
-      {
-        type: 'error',
-        closeOnClickModal: false,
-        center: true,
-        confirmButtonText: '重新登录',
-      }
-    ).then(() => {
+  if (status === 400) {
+    ElMessage.error(data.msg)
+  } else if (status === 401) {
+    ElMessageBox.confirm('当前用户无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', {
+      type: 'error',
+      closeOnClickModal: false,
+      center: true,
+      confirmButtonText: '重新登录'
+    }).then(() => {
       userStore.$reset()
       router.replace({ path: '/login' })
     })
   } else if (status === 403) {
     ElMessage.error('无权限访问')
+  } else if (status === 404) {
+    ElMessage.error('接口不存在')
+  } else if (status === 500) {
+    ElMessage.error('服务器错误')
   }
+
   return Promise.reject(error.response)
 }
 
@@ -44,7 +48,13 @@ request.interceptors.request.use(config => {
 })
 
 request.interceptors.response.use(res => {
-  return res.data
+  const data = res.data
+  if (data.success || data.code === 0) {
+    return data
+  } else {
+    ElMessage.error(data.msg)
+    return Promise.reject(data)
+  }
 }, errorHandler)
 
 export default request

src/views/user/Login.vue

@@ -1,11 +1,31 @@
 <script setup lang="ts">
 import { useUserStore } from '@/stores/user'
+import type { FormInstance } from 'element-plus'
 
 const userStore = useUserStore()
-const username = ref('')
-const password = ref('')
+
+const formData = reactive({
+  username: '',
+  password: ''
+})
+const formRef = ref<FormInstance>()
+const formRules = {
+  username: {
+    required: true,
+    message: '请输入用户名'
+  },
+  password: {
+    required: true,
+    message: '请输入密码'
+  }
+}
+
 const handleSubmit = () => {
-  userStore.login()
+  formRef.value?.validate(valid => {
+    if (valid) {
+      userStore.login(formData)
+    }
+  })
 }
 </script>
 
@@ -14,17 +34,17 @@ const handleSubmit = () => {
     <div class="w-1000px h-568px bg-white flex">
       <div class="w-50% h-full"></div>
       <div class="w-50% h-full flex justify-center items-center">
-        <el-form class="w-60%">
+        <el-form class="w-60%" :model="formData" ref="formRef" :rules="formRules">
           <div class="text-24px mb-4">登录</div>
-          <el-form-item>
-            <el-input v-model="username" size="large" placeholder="请输入用户名">
+          <el-form-item prop="username">
+            <el-input v-model="formData.username" size="large" placeholder="请输入用户名">
               <template #prefix>
                 <i-ep-user />
               </template>
             </el-input>
           </el-form-item>
-          <el-form-item>
-            <el-input v-model="password" size="large" placeholder="请输入密码">
+          <el-form-item prop="password">
+            <el-input type="password" v-model="formData.password" size="large" placeholder="请输入密码">
               <template #prefix>
                 <i-ep-lock />
               </template>

vite.config.ts

@@ -13,7 +13,7 @@ import Unocss from 'unocss/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(), 
+    vue(),
     vueJsx(),
     Unocss(),
     AutoImport({
@@ -30,7 +30,7 @@ export default defineConfig({
       resolvers: [
         ElementPlusResolver(),
         IconsResolver({
-          enabledCollections: ['ep'],
+          enabledCollections: ['ep']
         })
       ],
       dirs: ['src/components'],
@@ -38,8 +38,8 @@ export default defineConfig({
       dts: 'src/components.d.ts'
     }),
     Icons({
-      autoInstall: true,
-    }),
+      autoInstall: true
+    })
   ],
   resolve: {
     alias: {
@@ -49,18 +49,18 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: "",
-        changeOrigin: true,
-      },
-    },
+        target: 'http://10.8.8.57:30701/mbwb',
+        changeOrigin: true
+      }
+    }
   },
-  build:{
+  build: {
     terserOptions: {
       //打包后移除console和注释
       compress: {
         drop_console: true,
-        drop_debugger: true,
-      },
-    },
-  },
+        drop_debugger: true
+      }
+    }
+  }
 })