Angular中服务器宕机时登录页跳转异常问题排查

从你提供的代码和描述来看，出现先跳主页再跳登录页的异常行为，主要有以下几种可能原因：

• 路由守卫的滞后判断：前端路由的登录状态守卫可能依赖本地存储的登录凭证（比如token），服务器宕机时本地凭证还未被清除，守卫会先允许进入主页；直到sockjs的回调触发后才执行跳转登录逻辑，导致短暂显示主页。

• Dialog关闭触发默认路由行为：this.dialogRef.close()可能会让页面回退到之前的路由（比如主页），之后才执行this.router.navigate(['/login'])。相当于先因dialog关闭回到主页，再跳转到登录页，所以会出现短暂的主页显示。

• Alert的同步阻塞影响：alert("Server is down!!")是同步阻塞弹窗，用户关闭弹窗后才会执行后续的关闭dialog和路由跳转。在弹窗显示期间，前端可能已经因为会话失效触发了守卫的主页跳转逻辑，等弹窗关闭后再跳登录，就出现了先后顺序。

• 异步回调的执行时机：sockjs的jobStatusClose$订阅回调是异步触发的，可能此时页面已经因为服务器断开连接，触发了其他会话失效的处理逻辑（比如自动跳转到主页），之后这个回调才执行跳转登录，导致视觉上的先后跳转。

你的监听回调代码：

this.sockjsService.jobStatusClose$.subscribe(value => {
    console.log("value  -----------", value+"  this.data.job_status   ",this.data.job_status);
    if(value === 3 && this.data.job_status==='NEW')
    {
        alert("Server is down!!");             
        this.dialogRef.close();
        this.router.navigate(['/login']);
        return;
    }       
});

可以尝试调整逻辑来避免这个问题，比如：

• 先清除本地登录状态（如token），再执行路由跳转，让守卫直接拦截到登录页
• 去掉同步阻塞的alert，改用非阻塞的提示组件，避免延迟后续操作
• 调整执行顺序，先执行路由跳转，再关闭dialog

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