flaschengeist-frontend/src/plugins/user/pages/User.vue

<template>
  <div>
    <q-page
      padding
      class="fit row justify-center content-center items-center"
      v-if="checkMain"
    >
      <q-card class="col-4" height="">
        <q-card-section>
          Name: {{ userState.firstname }} {{ userState.lastname }}<br />
          E-Mail: {{ userState.mail }}<br />
          Roles:
          <ul v-for="role in userState.roles" v-bind:key="role">
            <li>{{ role }}</li>
          </ul>
          <br />
          Token expires: {{ userToken.expires }}
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { UserStateInterface } from '../store/user';
import { mainLink } from '../plugin';

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const userState = computed(
      () => <UserStateInterface>root.$store.getters['user/user']
    );
    const userPermissions = computed(
      () => <UserStateInterface>root.$store.getters['user/permissions']
    );
    const userToken = computed(
      () => <UserStateInterface>root.$store.getters['user/token']
    );
    const checkMain = computed(() => {
      return mainLink.name == root.$route.name;
    });
    return { userState, userPermissions, userToken, checkMain };
  }
});
</script>