1. Protected Pages

Objectives

Set up pages that require login to access
Check user membership status

Create a Vue SPA page, define the definePageMeta property with auth:true. This way, when there's a page request, it will check if the user is logged in. If not logged in, it will automatically redirect to the /auth/login page.

<script setup lang="ts">

definePageMeta({
  auth: true
})

...

Membership Levels

Read user profile data in the required business interface.

Fetch user profile data

<script setup lang="ts">

// Check if user is VIP
const { data: user } = await useFetch<any>('/api/users/profile', {
  method: 'post'
})

const isVip = computed(() => {
  return isUserVip(user.value?.user_level)
})

Show prompt in page

<UPageError
  v-if="!isVip"
  :status="403"
  name="Please Upgrade Membership"
  message="Members can view more paginated data and historical data."
  :clear-button="{ label: 'Upgrade Membership Now', to: '/pricing' }"
/>

<div v-else class="">
        ...
      </div>

This provides a better user experience.

end