Vue - zmiana widoku dla zalogowanych

Question

Cześć,

jestem początkujący w Vue i potrzebuję pomocy. Mój problem polega na tym, że chciałbym wyświetlać inną zawartość aplikacji dla zalogowanych użytkowników, a inną dla niezalogowanych. Na backendzie korzystam z .NET Core i Identity, a zaimplementowana autoryzacja jest na standardowych ciasteczkach. Do sprawdzenia czy ktoś jest zalogowany służy mi jeden endpoint, który zwraca 200 gdy się jest autoryzowanym użytkownikiem, bądź 401 gdy się nim nie jest. Zrobiłem tak, ponieważ wyczytałem, że rzekomo nie można otwierać po stronie przeglądarki ciasteczek, które są ustawione HTTP Only=true. W jaki sposób w Vue, mógłbym zrobić tak, żeby z automatu (coś na zasadzie middleware) podmieniało mi widok w zależności od wyniku funkcji sprawdzającej status zalogowania ?

Answer 1

Skoro backend zwraca odpowiedni status, to najprostsze wydaje się skorzystanie z warunkowego renderowania w Vue (tu dla wersji v3).

Comments

Też już o tym myślałem, tylko zbytnio nie wiedziałem w którym miejscu to dodać. Tak czy siak działa tak jak chciałem, dzięki.

 

Dla potomnych: rozwiązaniem jest dodanie <script> i odpowiedniej metody w pliku, który jest importowany do main.js (w moim przypadku App.vue). Przykład:

<template>
  <div>
    <div class="nav" v-if="isOnline() === false">
      <router-link to="/">Home</router-link> |
      <router-link to="/login">Logowanie</router-link> |
      <router-link to="/register">Rejestracja</router-link>
    </div>
    <div class="nav" v-else>jestem zalogowany</div>
    <router-view />
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials = true;

export default {
  methods: {
    isOnline: function () {
      axios
        .get(
          "https://" + process.env.VUE_APP_API_ADDRESS + "/api/account/online"
        )
        .then((response) => {
          if (response.status === 200) {
            return true;
          } else {
            return false;
          }
        })
        .catch((e) => {
          return false;
        });
    },
  },
};
</script>