house/fount/views/home.vue

<template>
  <!-- 页面主容器 -->
  <div class="content">

    <!-- 欢迎语句，显示项目名称 -->
    <div class="text main-text">欢迎使用 {{this.$project.projectName}}</div>

  </div>
</template>

<script>
// 导入静态路由模块，用于页面跳转
import router from '@/router/router-static'

export default {
  // 生命周期钩子：组件挂载完成后执行初始化方法
  mounted(){
    this.init();
  },
  methods:{
    // 初始化方法：验证用户登录状态
    init(){
      // 判断是否已保存 Token（登录凭证）
      if(this.$storage.get('Token')){
        // 发送请求获取当前用户信息
        this.$http({
          // 请求地址：根据 sessionTable 获取对应的用户信息接口
          url: `${this.$storage.get('sessionTable')}/session`,
          method: "get"
        }).then(({ data }) => {
          // 如果返回数据且 code 不为 0，表示未登录或会话失效
          if (data && data.code != 0) {
            // 跳转到登录页
            router.push({ name: 'login' })
          }
        });
      } else {
        // 如果没有 Token，直接跳转到登录页
        router.push({ name: 'login' })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;                  /* 使用弹性布局 */
  align-items: center;            /* 垂直居中 */
  flex-direction: column;         /* 子元素垂直排列 */
  width: 100%;                    /* 宽度占满父容器 */
  height: 100%;                   /* 高度占满父容器 */
  min-height: 500px;              /* 最小高度为500px */
  text-align: center;             /* 文字水平居中 */

  .main-text {
    font-size: 38px;              /* 字体大小 */
    font-weight: bold;            /* 加粗字体 */
    margin-top: 15%;              /* 上边距为视口高度的15% */
  }

  .text {
    font-size: 24px;              /* 字体大小 */
    font-weight: bold;            /* 加粗字体 */
    color: #333;                  /* 字体颜色 */
  }
}
</style>