寻求beforeRouteEnter替代方案解决登录欢迎弹窗数据延迟问题

一、调整弹窗触发时机（替代beforeRouteEnter） #

核心思路是等用户数据加载完成后再显示弹窗，避免出现无数据的空白状态，以下是两种可行方式：

1. 子组件内控制弹窗显示时机 #

修改子组件逻辑，不在created里直接显示弹窗，而是等用户数据请求完成后再打开：

<template>
  <b-modal
    :modal-class="modalStyling"
    centered
    modal-class="justify-content-center"
    v-model="isVisible">
      <!-- 加判断，确保有数据再渲染欢迎内容 -->
      <b-row v-if="user.name">
        <b-col class="text-center">
          <h2>{{ 'welcome' + ' ' }} {{ user.name }}</h2>
        </b-col>
      </b-row>
      <!-- 可选：数据加载时显示加载状态 -->
      <b-row v-else class="text-center">
        <b-col>加载中...</b-col>
      </b-row>
  </b-modal>
</template>

<script>
import {axiosService} from '@/services/axios';

export default {
 props: {
  showModal: Boolean
},
data() {
  return {
    isVisible: false,
    logs: {},
    user: {},
  };
},
watch: {
  // 监听父组件传过来的弹窗触发状态
  showModal(newVal) {
    if (newVal) {
      // 请求完成后再显示弹窗
      this.getUser().then(() => {
        this.isVisible = true;
      });
    } else {
      this.isVisible = false;
    }
  }
},
methods: {
  // 把请求改成返回Promise，方便后续链式调用
  getUser(){
    return axiosService.getCurrentUser()
      .then(result => {
        this.user = result.data;
        return axiosService.getUserLogs(this.user.id)
          .then(result => this.logs = result.data);
      })
  }
},
};
</script>

父组件可保留beforeRouteEnter逻辑，若想完全替代，也可通过全局状态标记登录状态：

<template>
   <b-container class="my-4">
      <welcome-modal :show-modal="visible" />
   </b-container>
</template>

<script>
import WelcomeModal from '@/views/company/WelcomeModal';

export default {
  components: {
    WelcomeModal
  },
data() {
  return {
    visible: false,
  };
},
mounted() {
  // 从全局状态或路由来源判断是否刚登录
  const fromLogin = this.$route.from.path === "/login";
  const isJustLoggedIn = this.$store.state.user.isJustLoggedIn;
  
  if (fromLogin || isJustLoggedIn) {
    this.visible = true;
    // 重置状态，避免刷新页面重复弹窗
    this.$store.commit('user/resetJustLoggedIn');
  }
},
};
</script>

2. 登录成功后直接传递用户数据 #

在登录页的登录接口成功后，把用户数据存入全局状态（如Vuex/Pinia），跳转页面时标记登录状态，父组件拿到数据后再打开弹窗，子组件直接接收数据无需重复请求：

// 登录页示例代码
axiosService.login(loginForm).then(res => {
  const user = res.data.user;
  this.$store.commit('user/setCurrentUser', user);
  // 跳转时标记来自登录页
  this.$router.push({ path: '/home', query: { fromLogin: true } });
})

父组件：

<script>
export default {
  // ...其他代码
data() {
  return {
    visible: false,
    user: {}
  };
},
mounted() {
  if (this.$route.query.fromLogin) {
    this.user = this.$store.state.user.currentUser;
    this.visible = true;
    // 清除路由参数，避免刷新重复触发
    this.$router.replace({ query: {} });
  }
},
};
</script>

子组件直接接收父组件传递的用户数据：

<template>
  <b-modal ...>
    <h2>{{ 'welcome' + ' ' }} {{ user.name }}</h2>
  </b-modal>
</template>
<script>
export default {
  props: {
    showModal: Boolean,
    user: Object // 新增接收用户数据的props
  },
  // ...其他代码
};
</script>

二、优化axios请求速度 #

1. 缓存用户数据 #

在axios请求中添加本地缓存逻辑，有效期内无需重复请求：

// axiosService.js
export const axiosService = {
  getCurrentUser() {
    // 先从localStorage读取缓存
    const cachedUser = localStorage.getItem('currentUser');
    if (cachedUser) {
      const { data, expire } = JSON.parse(cachedUser);
      // 缓存有效期设为1小时
      if (Date.now() - expire < 3600000) {
        return Promise.resolve({ data });
      }
    }
    // 无缓存时发起请求并更新缓存
    return axios.get('/api/current-user').then(res => {
      localStorage.setItem('currentUser', JSON.stringify({
        data: res.data,
        expire: Date.now()
      }));
      return res;
    });
  }
}

2. 合并接口请求 #

和后端协商，把getCurrentUser和getUserLogs合并为一个接口，减少HTTP请求次数：

// 修改子组件的getUser方法
getUser(){
  return axiosService.getCurrentUserWithLogs() // 后端新增的合并接口
    .then(result => {
      this.user = result.data.user;
      this.logs = result.data.logs;
    })
}

3. 后端接口优化 #

• 给用户表、日志表添加查询索引，加速数据库查询
• 只返回前端需要的字段，减少响应数据体积
• 启用Gzip压缩，降低传输耗时

内容的提问来源于stack exchange，提问作者Scandidi