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: {{ userObj.firstname }} {{ userObj.lastname }}<br />
          E-Mail: {{ userObj.mail }}<br />
          Roles:
          <ul v-for="(role, index) in userObj.roles" :key="'role' + index">
            <li>{{ role }}</li>
          </ul>
          <br />
          Token expires: {{ sessionObj.expires }}
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

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

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;

    const userObj = computed(() => store.state.user.user);

    const sessionObj = computed(() => store.state.user.session);

    const checkMain = computed(() => {
      return mainLink.name == root.$route.name;
    });
    return { userObj, sessionObj, checkMain };
  }
});
</script>