分离了获取用户个人信息的方法，但目前添加token仍然是手动的

src/api/user.ts

@@ -25,3 +25,16 @@ export const userRegister = payload => {
             }
         })
 }
+
+
+export const userInfo = () => {
+    return axios.get(`${USER_MODULE}`,
+        {headers: {token: localStorage.getItem('token')}})
+        .then(res => {
+            if(res.code == '400'){
+                throw new Error('个人信息获取失败!')
+            } else {
+                return res
+            }
+        })
+}

src/components/Dashboard.vue

@@ -1,41 +1,48 @@
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import {onMounted} from "vue";
-  import axios from 'axios';
+import {onBeforeMount, ref} from 'vue';
+  import {userInfo} from '../api/user.ts'
 
   const name = ref('haha')
   const tel = ref('')
   const address = ref('这里做的时候本来想放个表格的，结果发现一个用户其实只有一个地址，但这个已经改成了一个这么大的布局所以先这样吧')
 
-  const isCustomer = true
-  const isStaff = ''
+  const isCustomer = ref('true')
+  const isStaff = ref('false')
 
-  onMounted(() => {
-    const res = axios.get('/api/users', {
-      headers: {token: document.cookie.split(";")[0].split("=")[1]}
-    }).then(res => {
-      console.log(document.cookie.split(";")[0].split("=")[1])
+  onBeforeMount(() => {
+    userInfo()
+        .then(res => {
+          console.log(res)
 
-      console.log(res)
+          name.value = res.result.name
+          tel.value = res.result.phone
+          address.value = res.result.address
 
-      name.value = res.data.result.name
-      tel.value = res.data.result.phone
-      address.value = res.data.result.address
+          isCustomer.value = (res.result.role == 'CUSTOMER')
+          isStaff.value = (res.result.role == 'STAFF')
+        })
+        .catch(e => {
+          //todo: 处理错误
+        })
+  })
 
-      const isCustomer = (res.data.result.role == 'CUSTOMER')
-      const isStaff = (res.data.result.role == 'STAFF')
-    })
 
+  function updateInfo() {
+    //todo: 更新个人信息
+  }
 
-  })
+  function updatePassword() {
+    //todo: 更新密码
+  }
+
+  function updateAddress() {
+    //todo: 更新地址
+  }
 
 </script>
 
 <template>
 
-  <div id="updateSuccess" class="hidden overflow-y-auto overflow-x-hidden absolute justify-center items-center w-full h-full">
-    这个是一个弹窗，还没有写好
-  </div>
 
   <div class="flex items-center justify-center p-8 h-full overflow-y-clip space-x-5">
     <el-aside width="20%" class="h-full bg-gray-100  rounded-lg flex flex-col items-center justify-between">
@@ -53,7 +60,7 @@
       </div>
 
 
-      <div class="bg-gray-50 px-3 py-4 overflow-y-auto h-full w-full flex flex-col items-center justify-center shadow-md space-y-20">
+      <div class="bg-gray-50 px-3 py-4 overflow-y-auto h-full w-full flex flex-col items-center justify-center shadow-md space-y-5">
 
           <ul class="space-y-3 font-medium">
             <li>
@@ -90,7 +97,7 @@
           </ul>
 
 
-          <ul class="pt-4 mt-4 space-y-3 font-medium border-t border-gray-200">
+          <ul class="pt-4 space-y-3 font-medium border-t border-gray-200">
 
 
             <li>
@@ -134,7 +141,7 @@
 
         <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
           <span class="text-2xl font-semibold text-center">个人信息</span>
-          <button type="submit"
+          <button type="submit" @click="updateInfo"
                   class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-2xl text-xs px-4 py-2 text-center">更新</button>
         </div>
 
@@ -164,7 +171,7 @@
 
         <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
           <span class="text-2xl font-semibold text-center">密码</span>
-          <button type="submit"
+          <button type="submit" @click="updatePassword"
                   class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl  text-xs px-4 py-2 text-center">更新</button>
         </div>
 
@@ -187,7 +194,7 @@
 
         <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
           <span class="text-2xl font-semibold text-center">地址信息</span>
-          <button id="updateProductButton" data-modal-target="updateProductModal" data-modal-toggle="updateProductModal"
+          <button @click="updateAddress"
                   class="block text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-3xl text-xs px-4 py-2 text-center" type="button">
             添加地址
           </button>