已登录用户访问登录页时强制跳转至/home的实现方案求助

核心逻辑是在/login页面资源返回、或页面初始化的最早阶段校验用户登录状态，若已登录直接触发重定向，无需等待页面渲染或用户操作。

1. 服务端路由场景（SSR/后端渲染） #

性能最优，直接在服务端返回响应前完成校验，避免返回多余的登录页资源，示例为Node.js Express框架代码，其他后端语言逻辑同理：

app.get('/login', (req, res) => {
  // 从session、加密Cookie中读取登录状态
  const isLogined = req.session.isLogined || !!req.cookies.valid_auth_token
  if (isLogined) {
    // 返回302重定向响应
    return res.redirect('/home')
  }
  // 未登录正常返回登录页
  res.render('login')
})

2. 客户端单页应用（SPA）场景 #

优先选择路由守卫方案，逻辑统一易维护；也可在登录页内部做快速校验。

2.1 路由守卫方案（推荐） #

Vue Router 示例：

const router = createRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/login.vue'),
      // 路由独享守卫，进入登录页前触发校验
      beforeEnter: (to, from, next) => {
        // 从本地存储、状态管理器中读取登录状态
        const isLogined = !!localStorage.getItem('auth_token') || store.state.user.isLogined
        isLogined ? next('/home') : next()
      }
    }
  ]
})

React Router v6 示例：

// 封装登录页专属路由守卫
const LoginGuard = ({ children }) => {
  const isLogined = useAuth() // 自定义hook读取登录状态
  const navigate = useNavigate()
  useEffect(() => {
    if (isLogined) {
      // replace模式避免登录页留在历史栈，用户点后退不会重复触发重定向
      navigate('/home', { replace: true })
    }
  }, [isLogined, navigate])
  return isLogined ? null : children
}

// 路由配置中引用
<Route path="/login" element={
  <LoginGuard>
    <LoginPage />
  </LoginGuard>
} />

2.2 登录页内快速校验方案 #

如果暂时不需要调整路由配置，可直接在登录页的最顶部插入校验逻辑，原生JS示例：

<!-- 放在login页head标签最顶部，优先执行避免页面多余渲染 -->
<script>
const isLogined = !!localStorage.getItem('auth_token')
if (isLogined) {
  location.replace('/home')
}
</script>

注意：前端校验仅做体验优化，必须配套服务端的接口权限校验，防止用户手动修改本地存储绕过规则。

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