前端优雅处理服务器维护状态：自动跳转与路由守卫实践

前端优雅处理服务器维护状态：自动跳转与路由守卫实践

1. 需求描述

在实际业务中，后端服务可能因维护或故障返回 HTTP 500+ 错误，此时前端需要：

1. 自动检测服务器维护状态（基于 HTTP 状态码 ≥500）。
2. 在维护时间段内，跳转至“维护提示页面”。
3. 路由守卫需放行“维护提示页面”，避免前置请求拦截。
4. 非维护时间访问“维护提示页面”，自动跳转回首页。

---

2. 实现思路

(1) 核心逻辑

• HTTP 拦截器捕获 500+ 错误 → 检查是否在维护时间 → 跳转维护页。
• 路由守卫白名单：绕过权限校验，确保 /transfering（维护提示页面路由） 可访问。
• 维护页智能跳转：非维护时间自动返回首页。

(2) 关键技术点

技术点	实现方式
错误拦截	Axios/Promise 的 catch 处理
维护时间判断	动态时间比对（或后端 API 配置）
路由守卫白名单	router.beforeEach 排除特定路径
维护页自动跳转	mounted 生命周期检测时间

---

3. 代码实现

(1) HTTP 拦截器处理 500+ 错误

在全局请求封装（如 axios）或业务 API 中：

// src/utils/request.js

axios.interceptors.response.use(
  response => response,
  error => {
     if (error.response?.status >= 500) {
            const start = new Date(2025, 3, 8, 19, 30) // 月份从0开始，3表示4月
            const end = new Date(2025, 3, 8, 20, 30)

            const now = new Date()

            const isInMaintenanceTime = now >= start && now <= end
            const fullPath = router.currentRoute.fullPath
            if (isInMaintenanceTime) {
                if (fullPath !== "/transfering") {
                    router.replace("/transfering")
                }
            }
            return Promise.reject("ServiceUpgrade")
        }
        return Promise.reject(error)
  }
)

(3) 路由守卫白名单配置

// src/router/index.js
router.beforeEach((to, from, next) => {
  if (to.path === '/transfering') {
    return next() // 放行维护页
  }
  // 其他路由逻辑...
  next()
})

(4) 维护页自动跳转首页

<!-- src/views/Transfering.vue -->
<template>
    <div class="contextcontext">
        <h1>🛠️ 维护升级</h1>
        <h2>维护时间：2025-04-08 18:30 ~ 2025-04-08 19:00</h2>
        <p>
            系统暂停服务期间，如对系统升级或使用存在问题，请联系XXX
        </p>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator"

@Component({})
export default class Transfer extends Vue {
    isInMaintenanceTime = false

    created() {
        const start = new Date(2025, 3, 8, 19, 30) // 月份从0开始，3表示4月
        const end = new Date(2025, 3, 8, 20, 30)

        const now = new Date()
        this.isInMaintenanceTime = now >= start && now <= end

        // 不在维护时间则自动跳转
        if (!this.isInMaintenanceTime) {
            this.$router.replace("/")
        }
    }
}
</script>

<style scoped>
.contextcontext {
    display: flex;
    flex-direction: column; /* 子元素纵向排列 */
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
</style>

---

控制台

页面效果

最终效果：

• 维护期间用户请求触发 500+ 错误时，无缝跳转至维护页。
• 非维护时间访问 /transfering 自动重定向首页，避免无效停留。

通过此方案，可系统化提升前端对服务端异常的容错能力，适用于高可用性要求的 Web 应用。