[WIP] Добавил авторизированного пользователя и отображение его аватара

src/components/LoggedInLayout.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 .flex.flex-col.w-full.h-full.gap-y-2
     the-header(
+      :url="url",
       :is-open-form="isOpenForm",
       :close-form="closeForm",
       :open-form="openForm",

src/components/TheHeader.vue

@@ -23,8 +23,9 @@
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center.relative
-        base-avatar.mr-2(:size="32")
+        base-avatar.mr-2(:size="36", :color="userData.color", v-if="!userData.photo") {{changeName}}       
-          img(:src="avatarSrc", alt="Avatar")
+        base-avatar.mr-2(:size="32", v-else)
+          img.h-full.object-cover(:src="url + userData.photo", alt="Avatar")
         button.header-buttons(@click="openPopup")
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
         base-popup.right-2.top-10(v-if="showPopup", :width="160", v-click-outside="openPopup")
@@ -49,6 +50,7 @@ export default {
     BaseClientFormCreate,
   },
   props: {
+    url: String,
     openForm: Function,
     closeForm: Function,
     isOpenForm: Boolean,
@@ -62,8 +64,16 @@ export default {
         name: "Гордеев Николай Степанович",
       },
       showPopup: false,
+      userData: JSON.parse(localStorage.getItem("userData")),
     };
   },
+  computed: {
+    changeName() {
+      return `${this.userData.last_name || ""} ${
+        this.userData.first_name || ""
+      } ${this.userData.patronymic || ""}`;
+    },
+  },
   methods: {
     logout() {
       localStorage.removeItem("tokenAccess");

src/pages/login/TheLogin.vue

@@ -54,6 +54,7 @@ export default {
       authorized: true,
       user: { username: "", password: "" },
       redColor: "var(--border-red-color)",
+      userData: {},
     };
   },
   computed: {
@@ -83,6 +84,30 @@ export default {
       localStorage.username = this.user.username;
       localStorage.password = this.user.password;
     },
+    auth(token) {
+      fetch("http://45.84.227.122:8080/auth/users/me/", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          fetch(`http://45.84.227.122:8080/accounts/users/${data.id}/detail`, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          })
+            .then((res) => {
+              return res.json();
+            })
+            .then((data) => {
+              this.userData = data;
+              localStorage.setItem("userData", JSON.stringify(this.userData));
+            });
+        });
+    },
     login() {
       const requestOptions = {
         method: "POST",
@@ -103,6 +128,7 @@ export default {
           if (token) {
             localStorage.setItem("tokenAccess", token.access);
             this.$router.push("/");
+            this.auth(token.access);
           } else {
             this.$router.push("/login");
           }