Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

teampoison's avatar

If i add this in my code than data not showing for guest users - vue js

i have one vue js code where all data are come from backend api. firstly data not showing for guest users after that i some modiy the code data are showing for guest. now i add one another api for fetch family member data but when i run this again data not showing for guest users. if i remove that api code than data are showing. how can i fix it. if user are guest than this skip so data are showing to user.

<div
                class="row px-5 mt-3"
                v-if="member_profile.family_members === true"
              >
                <div class="col-md-4 float-left d-flex align-items-center">
                  <label for="height" class="m-0 f12 font-weight-bold"
                    >Family Member Name</label
                  >
                </div>

                <div class="col-md-8 float-left">
                  <select class="form-control" v-model="member_concern">
                    <option value="" disabled selected>
                      Select Member Name
                    </option>
                    <option
                      v-for="member in members"
                      :key="member.id"
                      :value="`${member.first_name} ${member.last_name}`"
                    >
                      {{ member.first_name }} {{ member.last_name }}
                    </option>
                    <!-- Add more options as needed -->
                  </select>
                  <span
                    v-if="member_concernError"
                    class="error-message text-danger"
                    >{{ member_concernErrorText }}</span
                  >
                </div>
  mounted() {
    this.fetchMembers(); 
},
 methods: {
    fetchMembers() {
      console.log("fetchMembers() called"); // Log a message to the console to verify that the method is being called
      let member_profile = JSON.parse(localStorage.getItem("member_profile"));
      let access_token = localStorage.getItem("access_token");

      let endpointUrl = `/api/auth/get_family_members_byid/${member_profile.member_unique_id}?token=${access_token}`;

      fetch(endpointUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => {
          console.log(response);

          if (response.ok) {
            return response.json();
          } else {
            throw new Error(
              `API request failed with ${response.status} ${response.statusText}`
            );
          }
        })
        .then((data) => {
          console.log(data);

          if (data.success === true) {
            this.members = data.data;
            console.log(this.members);

            if (this.members.length === 0) {
              console.warn("No family members found.");
            }
          } else {
            console.error("API request failed:", data);
          }
        })
        .catch((error) => {
          console.error("API request error:", error);
        });
    },
0 likes
1 reply
rohit_mg's avatar

I can be sure based on the code you have shared, but for a guest is there an access token in localStorage? if no, then /api/auth/get_family_members_byid/${member_profile.member_unique_id}?token=${access_token} will fail. If this is the issue then you should probably have a different API route for guests which isn't authenticated

Please or to participate in this conversation.