1 私有页面

目标

设置需要登录才能访问的页面
检查用户是否会员身份

保护页

新建 vue spa 页面，定义 definePageMeta 属性 auth:true，这样当有页面请求就会检查是否已登录，没有登录会自动跳转 /auth/login 页面。

<script setup lang="ts">
  
definePageMeta({
  auth: true
})

...

会员等级

在需要的业务界面读取用户 profile 资料。

拉取用户 profile 数据

<script setup lang="ts">
  
// 检查是否 vip 用户
const { data: user } = await useFetch<any>('/api/users/profile', {
  method: 'post'
})

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

页面中给出提示

      <UPageError
        v-if="!isVip"
        :status="403"
        name="请升级会员"
        message="会员可以查看更多的翻页数据和历史数据。"
        :clear-button="{ label: '立刻升级会员', to: '/pricing' }"
      />

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

这样用户体验好。

end

11 环境变量

环境变量清单。

2 隐私政策

通过 GPT AI 创建隐私政策文案。